Menu
If I have something like this in my HTML
<div id="top">
<div class="txt">
<span class="welcome">Welcome on my website</span>
<span class="links"><a href="Home">Home</a></span>
</div>
</div>
How I can select the welcome class in my CSS.
I've tried #top.txt.welcome but doesn't work. I've also tried #top.txt span.welcome.
751
Nesting Selector: the & selector. When using a nested style rule, one must be able to refer to the elements matched by the parent rule; that is, after all, the entire point of nesting. To accomplish that, this specification defines a new selector, the nesting selector , written as & (U+0026 AMPERSAND).
Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selectors (select elements based on a certain state) Pseudo-elements selectors (select and style a part of an element)
What is CSS nesting? This syntax has been possible with CSS preprocessors like Sass and Less. As you can see from both code samples above, nesting is enclosing a selector inside another selector. Nesting helps you to group related styles and write CSS in a nested hierarchy.
#top .txt is not #top.txt
the latter means that the matched element has the id AND the class, while the former means that the matched element has the class, and one of its ancestors element has the id
74
You can use
span.welcome
#top .welcome
#top div.txt span.welcome
.welcome
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
