123

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 { ... }
Ricardo Tomasi
  • 34,573
  • 2
  • 55
  • 66
Dave
  • 12,117
  • 10
  • 46
  • 52
  • http://stackoverflow.com/questions/7634932/less-js-strong-nested-rules – thirtydot Nov 13 '11 at 09:24
  • 19
    Amusingly, the snippet in your question was already the right answer. – thirtydot Nov 13 '11 at 09:27
  • @thirtydot Sure, except that it doesn't work... not if you don't remove the space or add the "&". I'm using less.js. Can't say for sure for other parsers. – Dave Nov 15 '11 at 20:10
  • 2
    I've just tested it, and the original code from your question *does* work in less.js. See for yourself: http://jsfiddle.net/thirtydot/vcE8t/ – thirtydot Nov 15 '11 at 22:16
  • 1
    Yes my apologies, it works like a charm with the space. +1 for you. I don't know how it didn't work for me for hours yesterday... otherwise I wouldn't have posted the question. – Dave Nov 16 '11 at 00:11

5 Answers5

155

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.

Dave
  • 12,117
  • 10
  • 46
  • 52
  • 5
    I wouldn't doubt that it's a bug if it doesn't work with a space there, unless it's specifically documented. – BoltClock Nov 13 '11 at 08:15
  • This is just fooling the parser. It sees it as a single selector, so you get `.panel >.control`. – Ricardo Tomasi Nov 13 '11 at 08:27
  • I take it as a feature rather than a bug. It's much more consistent when you use it this way as opposed to the "&". I think it's clearer code if you only use "&" with pseudo-classes and not child classes. – Dave Nov 15 '11 at 20:18
  • 1
    It's a feature of CSS, which accepts both `div > p` and `div>p`. Consistency would be always using space between selectors (take a look at the generated CSS). – Ricardo Tomasi Nov 15 '11 at 22:06
  • Sure, but I was more concerned with the consistency of using &. – Dave Nov 16 '11 at 00:19
  • Is it possible to place the `>` after the `.panel `? – hellouworld Feb 25 '20 at 11:27
80

The official way:

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

& always refers to the current selector.

See http://lesscss.org/features/#features-overview-feature-nested-rules

chicken
  • 1,579
  • 1
  • 13
  • 13
Ricardo Tomasi
  • 34,573
  • 2
  • 55
  • 66
  • 1
    I think this is also just fooling the parser (like you felt about the other answer). Let me explain. Like you said, & always refers to the current (parent) selector. So whatever that's after it should **apply** to the parent. And, that's pseudo-classes' role. Immediate child classes are closer to ****gasp**** child classes rather than pseudo-classes. So using just > is more intuitive and logical. – Dave Nov 15 '11 at 20:34
  • 6
    What do you think is more correct? `div > p` or `div >p`? The `&` combinator is the canonical way do it in LESS, not my feelings. Your explanation is rethorical. Some people write their CSS in a single line... – Ricardo Tomasi Nov 15 '11 at 22:03
  • Most people use LESS so they don't have to care about the actual CSS that gets generated. Anyhow, it turns out that space can be used after >. So & is purely redundant. – Dave Nov 16 '11 at 00:18
14

The correct syntax would be following while using '&' would be redundant here. 

.panel{
   > .control{
   }
}

According to less guidelines, '&' is used to parameterize ancestors (but there is no such need here). In this less example, &:hover is essential over :hover otherwise it would result in syntactic error. However, there is no such syntactic requirement for using '&' here. Otherwise all nestings would require '&' as they are essentially referring to parent.

sbharti
  • 899
  • 11
  • 22
1

In case that you need to target more selectors:

.parent {
    >.first-child,
    >.second-child,
    >.third-child {
    ...
    }
}
stojsins
  • 31
  • 1
  • 5
-1

Also, If you are targeting the first child element, such as the first <td> of a <tr>, you could use something like this:

tr {
    & > td:first-child {font-weight:bold;}
}

this helps reduce class declarations when they aren't needed.

pavlindrom
  • 366
  • 2
  • 12
seth yount
  • 132
  • 6