CODEWITHSUNDEEP
csscss-selectorsless
andi
andi

Reputation: 6522

LESS CSS - selecting a child with the same class as its parent

Just starting working with LESS today... got a question that I am trying to figure out.
Is there a way to apply a style to an LI that has the same class name as its parent UL, without knowing in advance what that class name is?

For example, here is some HTML:

<ul class="random-classname">
    <li class="foo">foo</li>
    <li class="random-classname">Select Me!</li>
    <li class="bar">bar</li>
</ul>

I want to apply a background color to that second element, without using a specific class name in the CSS.

Upvotes: 2

Views: 2967

Answers (2)

ScottS
ScottS

Reputation: 72261

This only answers your question in a very particular use case, which I suspect is not exactly your use case (as it still requires the class name to be put into the css, it just allows the programmer to potentially let another assign it). I offer it here only because someone else may find useful.

If the scenario is such that one knows the "random" name at compile time, the class name could be set as a variable, and then processed like so:

@randomName: random-classname; //set at compile time

.@{randomName} {
  straight-property: value;
  & > & {
    nested-property: value;
  }
}

Which would produce: 

.random-classname {
  straight-property: value;
}
.random-classname > .random-classname {
  nested-property: value;
}

The above might be useful if one were building some type of framework, or dynamically setting the variable via php from user input at some other stage. But I believe you were hoping for some "generic" solution in your actual output CSS, which (as the comments noted) is not currently possible, and as they also noted, javascript is your best bet in such a case.

Upvotes: 3

Rob W
Rob W

Reputation: 9142

You are overthinking this. Using the selector .random-classname only, regardless if in LESS or CSS, will select both the ul and li...

Upvotes: -1

Related Questions