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:

Some irrelevant text

I will be red I won't be red

En de volgende CSS:

p + span { color: red; }

In dit geval wordt de eerste rood, deze volgt namelijk direct op de

. De tweede 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:

I will be red
I won't be green I will be red too I will be green

En de volgende CSS:

p > span { color: red; }

p > strong { color: green; }

In dit geval wordt de in de

rood, maar de in de niet groen. De zit namelijk wel direct binnen de

, maar de niet.