### 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
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Star Wars - ze prélogie</h3> <h4>Personnages</h4> <ul> <li>Anakin Webwalker</li> <li>Padmé Amidala</li> <li>Yoda</li> </ul> <h4>Films</h4> <ol> <li>Le DOM fantôme <ul> <li>1999</li> <li>2 h 16 min</li> </ul> </li> <li>L'attaque des .com <ul> <li>2002</li> <li>2 h 22 min</li> </ul> </li> <li>La Revanche des Siths Web <ul> <li>2005</li> <li>2 h 20 min</li> </ul> </li> </ol> </body> </html>
Seule la partie body de la page est représentée. Les feuilles texte ne sont pas représentées.
Fichier CSS : styles.css
/* Sélection des li descendants de ol */ ol li { border: 1px solid red; } /* Marge sur les li pour bien les voir */ li { margin: 3px; }