Is Conditional statements available in CSS

[Raga Mounika]

Hi Team,

I am using oXygen Author 18 with Eclipse plugin.
For my customization I need to have generated text for <troubleshooting> topic. Consider an element 'x' . In x/cause/title I should have "Cause" generated text in the below scenarios:
1) It should have "Cause" generated text when <x> is inserted and <cause> is given it.
And also it should have "Cause" generated text when <x/cause> is inserted and <title> is given it without any content in it(<title> is empty).
2) It should not have generated text when <x/cause> is inserted and <title> is having some content in it.

So for this condition is it possible to have If-else (conditional statement) in CSS? If yes, please provide the code.

Thank you!

Regards,
Mounika

[Radu]

Hi Mounika,

The list with all CSS selectors we support can be found here:

https://www.oxygenxml.com/doc/versions/ ... ctors.html

There is a certain CSS selector called subject selector:

https://www.oxygenxml.com/doc/versions/ ... ector.html

which allows you to match a parent element having a child matching a certain condition. Maybe this selector will help in your case.

Regards,
Radu

[Raga Mounika]

Hi Team,

Thanks for the reply

By using CSS selector the code works partially.
I used a CSS selector '>' and it worked for generated text. The issue now is I should only get the generated text in bold. By the below mentioned code I am getting the complete content in element in bold. If I use " [class~='x/cause']:before{ " the code partially works. It is not working in the condition when title is inserted and it is empty. Please help me with proper code to solve this issue.

Code: Select all

*[class~='x/cause']{

   -oxy-foldable: false; 

}

cause:not([title]){

    content:"Cause ";

    font-weight: bold;

}

*[class~='x/cause']! > [class~='topic/title']:empty{

    content:"Cause ";

    font-weight: bold;

}

*[class~='x/cause']! > [class~='topic/title'] {

    content: " ";

}

[Radu]

Hi Mounika,

Maybe you need a selector looking something like this:

Code: Select all

*[class~='x/cause']:has(title:empty):before{

    content: "abc";

    font-weight:bold;

}

Regards,
Radu

[Raga Mounika]

Hi Radu,

Thanks for the reply but it is not working in my case.

According to my requirement I should have:
1) Cause generated text when cause is entered
2) Cause generated text in cause\title and title is empty
3) No generated text when cause\title

Please check the below code I used in my customization:

Code: Select all

cause:not([title]):before{

    content:"Cause ";

    font-weight: bold;

}

*[class~='x/cause']! > [class~='topic/title']:empty:before{

    content: "Cause ";

    font-weight: bold;

   }

   

*[class~='x/cause']! > [class~='topic/title']:before{

    content: " ";

  }

The issue I am facing now is
1)In the second case I mentioned above ie., in cause\title and title is empty I am getting "Cause Cause" two generated texts and if any elements are inserted inside cause it is also inheriting the same bold property(ex. <p> if inserted inside <cause> when title is empty content inside <p> is also in bold)
2)"Cause" generated text is appeared in third condition when cause\title is entered and I should not get any generated text as of my code.

I observe I am getting "Cause" generated text because of
cause:not([title]):before{
content:"Cause ";
font-weight: bold;
}
in all the three conditions.

Please provide me an alterate solution other than CSS selector you mentioned in previous mail.

Thank you.

Best Regards,
Mounika

[Radu]

Hi Mounika,

About this selector:

Code: Select all

cause:not([title]):before

Why did you add square brackets to surround the title? Angle brackets are used to match attribute conditions.
If you want to express that the cause must not contain a title, the clause should be:

Code: Select all

cause:not(title):before

Regards,
Radu