Immediate Child selector in LESS
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 { ... }
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.
The official way:
.panel {
& > .control {
...
}
}
&
always refers to the current selector.
See http://lesscss.org/features/#features-overview-feature-nested-rules
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.
In case that you need to target more selectors:
.parent {
>.first-child,
>.second-child,
>.third-child {
...
}
}