Sélecteur de descendants

Syntaxe S1 S2

div p {
	margin-bottom: 0;
	font-family: verdana;
	}

Le combinateur espace permet de sélectionner les éléments descendants d'un autre élément.
La sélection s'effectue donc quelque soit le niveau d'imbrication des éléments.

un ancêtre et ses descendants

L'élément ancêtre est le premier sélecteur et ses descendants sont obtenus par le deuxième sélecteur.

div p { ... }
se lit : je cherche tous les éléments p qui ont pour ancêtre un élément div

Les sélecteurs utilisés dans la règle peuvent être de n'importe quel type ( simples, d'attributs, des pseudo classes, des pseudo éléments).

p.important a[href^="http"] { ... } se lit :
je cherche tous les éléments a dont l'attribut href commence par http et qui sont les descendants d'éléments p avec la classe important.

L'exemple suivant entoure d'une bordure les éléments li qui sont les descendant d'éléments ol. On remarquera que la sélection se fait sur toute la profondeur de l'arbre DOM et qu'elle inclut des enfants et des arrières-petits-enfants.

Exemple : sélection de descendants
Seule la partie body de la page est représentée. Les feuilles texte ne sont pas représentées.
Fichier CSS : styles.css