It selects all elements that are siblings a specified element.
"siblings" means "brother or sister"The different between adjacent sibling selector (+) is that It not select the immediatly after
element buttare all siblings elements.
In case before:
<div class="a">to select "a-b" classes, the rule is:
<p>Paragraph a in the div.</p>
<div class="a-a">
<p>Paragraph a-a in the div.</p>
</div>
<div class="a-b">
<p>Paragraph a-b in the div.</p>
</div>
<div class="a-b">
<p>Paragraph a-c in the div.</p>
</div>
</div>
.a-a ~ .a-b {An example:
}
<div class="a">If I declare:
<p>Paragraph a in the div.</p>
<div class="a-a">
<p>Paragraph a-a in the div.</p>
</div>
<div class="a-b">
<p>Paragraph a-b in the div.</p>
<div class="a-b-a">
<p>Paragraph a-b-a in the div.</p>
<div class="a-b-a-a">
<p>Paragraph a-b-a-a in the div.</p>
</div>
</div>
</div>
<div class="a-c">
<p>Paragraph a-c in the div.</p>
</div>
</div>
<div class="a">
<p>Paragraph a in the div.</p>
<div class="a-a">
<p>Paragraph a-a in the div.</p>
</div>
<div class="a-b">
<p>Paragraph a-a in the div.</p>
</div>
<div class="a-b">
<p>Paragraph a-b in the div.</p>
<div class="a-b-a">
<p>Paragraph a-b-a in the div.</p>
<div class="a-b-a-a">
<p>Paragraph a-b-a-a in the div.</p>
</div>
</div>
</div>
<div class="a-c">
<p>Paragraph a-c in the div.</p>
</div>
</div>
.a .a-a ~ .a-b .a-b-a-a {the result is:
background-color: yellow;
}
where is visibile that all a-b-a-a paragraphs are yellow background because a-b-a-a paragraph is "sibling" of a-a paragraphs.
Nessun commento:
Posta un commento