### Sélecteur d'enfants

Syntaxe `S1 > S2`

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

Le combinateur > permet de sélectionner les éléments enfants d'un autre élément.
La sélection s'arrête donc au premier niveau d'imbrication des éléments.

un parent et ses enfants

L'élément parent est le premier sélecteur et ses enfants sont obtenus par le deuxième sélecteur.

`div > strong { ... }`
se lit : je cherche tous les éléments strong qui ont pour parent un élément div

Avec le code HTML

    <p>Texte <strong>un</strong></p>
    <div>
    	Texte <strong>deux</strong>
    	<p>Texte <strong>trois</strong></p>
    	Texte <strong>quatre</strong>
    </div>

seul "deux" et "quatre" sont des enfants et seront sélectionnés avec la règle précédente. Les autres éléments strong sont soit en dehors du div, soit des petits-enfants

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).

`#remarque > a.trop-la-classe { ... }` se lit :
je cherche tous les éléments a avec la classe `trop-la-classe` qui sont enfants de l'élément dont l'attribut `id` à la valeur `remarque`.

L'exemple suivant entoure d'une bordure les éléments li qui sont les enfants d'éléments ol. On remarquera la sélection s'arrête aux premiers li des listes imbriquées ol ul.

Exemple : sélection d'enfants
<!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 enfants de ol */ ol > li { border: 1px solid red; } /* Marge sur les li pour bien les voir */ li { margin: 3px; }