Check if parent has class using LESS

Question

Example scenario: I would like to hide a sub-navigation menu if the user has javascript enabled so that it can be revealed on a click of a navigation link further up in the nav hierarchy. Modernizr adds a class 'js' to the html tag if javascript is enabled so I can use that for detection.

In SASS I can do something like this:

div.subnav{ display: block; html.js & { display: none; } }

Can this be done using LESS? Can I target a parent from within another rule?

Did you try it?

cimmanon
– cimmanon

2013-01-16 13:16:37 +00:00
Commented Jan 16, 2013 at 13:16 — cimmanon
– cimmanon, Commented Jan 16, 2013 at 13:16

seven-phases-max · Accepted Answer · 2018-04-25 15:33:26Z

66

Can this be done using LESS?

Yes.

The code you provided works in LESS. The & combinator works the same.

In the end, the selectors generated for:

div.subnav { ... html.js & { ... } }

will be:

div.subnav { ... } html.js div.subnav { ... }

edited Apr 25, 2018 at 15:33

seven-phases-max

11.9k1 gold badge47 silver badges58 bronze badges

answered Jan 16, 2013 at 12:44

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Chamberlain Over a year ago

This is one of the greatest things I've ever seen.

stravanato Over a year ago

Great tip, LESS is huge and it's not always easy to find the right instruction.

Collectives™ on Stack Overflow

Check if parent has class using LESS

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related