Ce type de sélecteur est utilisé lorsque l'on veut atteindre une balise qui est immédiatement en aval d'une autre par rapport à l'arbre du document.
Dans ce cas, le signe "plus" ("+") sépare les deux instructions dont la seconde sera le sujet du formatage et la première constituera l'élément frère immédiatement en amont.
Ainsi, si nous voulons que toutes les balises <blockquote> suivant l'instruction <h2>, apparaissent sur un fond vert, alors il suffit d'écrire la ligne suivante :
<blockquote> ... </blockquote>
<h2> ... </h2>
<blockquote> ... </blockquote>
<p>
<blockquote> ... </blockquote>
</p>
h2 + blockquote {background-color: green}
<html>
<head>
<style>
<!--
Balise_amont + Balise_cible {Propriété1: Valeur1;...}
...
Règles de style
...
-->
</style>
...
</head>
<body>
<Balise_amont> ... </Balise_amont>
<Balise_cible> ... </Balise_cible>
...
Diverses commandes HTML
...
</body>
</html> |
| Windows | Macintosh | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| NE4 | NE6 | NE7 | IE5 | IE55 | IE6 | OP5 | OP6 | OP7 | NE4 | NE6 | NE7 | IE4 | IE5 |