Menu
The child combinator ( > ) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.
It is possible to reference the parent selector by using the &(ampersand) operator. Parent selectors of a nested rule is represented by the & operator and is used when applying a modifying class or pseudo class to an existing selector.
Definition and Usage. The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
Child Selector: Child Selector is used to match all the elements which are children of a specified element. It gives the relation between two elements. The element > element selector selects those elements which are the children of the specific parent.
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 {
...
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With