CSS: + versus > selector
Binnen CSS zijn er allerlei manieren om elementen te stylen, daar dient het voor. Een class hier, een id daar en je kunt helemaal los gaan. Maar dat is niet altijd nodig. Door slim met je code om te gaan kun je ook op andere manieren elementen beïnvloeden.
De + selector
De + selector stelt dat als element b direct na element a komt in de HTML, de CSS regel geldt.
Neem het volgende stukje HTML:
<p>Some irrelevant text</p> <span>I will be red</span> <span>I won't be red</span>
En de volgende CSS:
p + span {
color: red;
}
In dit geval wordt de eerste <span> rood, deze volgt namelijk direct op de <p>. De tweede <span> blijft ongewijzigd. Bekijk het resultaat in jsFiddle.
De > selector
De > selector stelt dat als element b in de HTML direct binnen element a valt, de CSS regels gelden.
Neem het volgende stukje HTML:
<p>
<span>I will be red<br />
<strong>I won't be green</strong>
</span>
<span>
I will be red too
</span>
<strong>I will be green</strong>
</p>
En de volgende CSS:
p > span {
color: red;
}
p > strong {
color: green;
}
In dit geval wordt de <span> in de <p> rood, maar de <strong> in de <span> niet groen. De <span> zit namelijk wel direct binnen de <p>, maar de <strong> niet. Bekijk het resultaat in jsFiddle.
De lijst met interessante boeken van A List Apart voor Frontend Developers blijft groeien. Kennelijk is daar ook alweer een tijdje het boek "Responsive Web Design" te krijgen.