Immediate Child selector in LESS

css css-selectors less
Dave picture Dave · Nov 13, 2011 · Viewed 76.9k times · Source

Is there anyway to have LESS apply the immediate child selector ( > ) in its output?

In my style.less, I want to write something like:

.panel {
    ...
    > .control {
        ...
    }
}

and have LESS generate something like:

.panel > .control { ... }

Answer

Dave picture Dave · Nov 13, 2011

UPDATE

Actually, the code in the original question works fine. You can just stick with the > child selector.

Found the answer.

.panel {
    ...
    >.control {
        ...
    }
}

Note the lack of space between ">" and ".", otherwise it won't work.

Related questions

What is the meaning of an ampersand in Less selectors?

I download a project, and in it there use less write the stylesheet. And in the script code the name: own-space, and in the less code, there are &-btn-box, &-tra and &-input-identifycode-con selectors. I have two questions: …

Read More
Is there a CSS parent selector?

How do I select the <li> element that is a direct parent of the anchor element? As an example, my CSS would be something like this: li < a.active { property: value; } Obviously there are ways of doing …

Read More
CSS selector for first element with class

I have a bunch of elements with a class name red, but I can't seem to select the first element with the class="red" using the following CSS rule: What is wrong in this selector and how do I correct …

Read More