CSS selectors exceptions in LESS framework?

Question

Is it possible to make exceptions when writing CSS selectors in the LESS framework?

Example:

<ul> <li>one</li> <li>two</li> <li><a href="#">three</a></li> <li><a href="#">four</a></li> </ul>

Is there a way to write a selector that affects all instances of <li> except those which contain an <a>?

I know the LESS implements Guards (that act like if/else statements), but I actually don't know if they can help or if there are no solutions.

there's not really a great way to do this with less, since it would need to provide you with a non-native selector. You might want to use a JS library to add a class to those items, like with api.jquery.com/has-selector — jacobangel
– jacobangel, Commented Sep 3, 2013 at 15:10

Community · Accepted Answer · 2017-05-23 12:05:11Z

The Answer is "No"

LESS, being a CSS preprocessor has two main things that prevent what you are wanting to do.

As a preprocessor run server-side, it has no idea about the actual HTML structure of a page (unlike javascript being ran client-side). Even if you are running LESS client-side in actual release (not normally recommended), it takes extra javascript work to get it to actually have any awareness of the HTML structure. So LESS cannot respond on the fly to the HTML like javascript itself can.
As a CSS preprocessor, it will ultimately produce from its code only what you might write in native CSS. Since there is currently no "parent selector" in CSS (which is what you are really asking... how to select a parent li or not based off its child a element), then LESS cannot produce something CSS cannot itself do.

So if you have control of the HTML, I recommend putting a class on either the li elements that have an a or those that do not. If it is dynamic (and thus unknown until run time), then javascript itself (whether through a library like JQuery or otherwise), will be the only possible solution left to you.

Yes @ScottS, it is dynamic. I think I'll make a php check to add a css class to the li elements that don't contain an a. Thanks :)

Collectives™ on Stack Overflow

CSS selectors exceptions in LESS framework?

1 Answer 1

The Answer is "No"

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The Answer is "No"

1 Comment

Related