### Sélecteurs groupés

Syntaxe `S1, S2`

    dl, dt, dd,
    ul, ol {
    	margin: 0;
    	padding: 0
    	}

Le combinateur virgule permet de définir le même bloc de décalarations de style pour tous les sélecteurs qu'il sépare. On parle aussi de regroupement de sélecteurs. Ce système est trés souvent utilisé car il permet de minimiser le code CSS et de rendre les modifications plus simples.

Avec le combinateur virgule tous les sélecteurs de la règles sont concernés. C'est comme un opérateur ET.

Les sélecteurs regroupés peuvent être de n'importe quel type ( simples, d'attributs, des pseudo classes, des pseudo éléments).

L'exemple suivant entoure d'une bordure les éléments h3, h4 et ul. La couleur des caractères des éléments h3 et h4 sera rouge.

Exemple : regroupement de sélecteur
<!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>
Fichier CSS : styles.css
h3, h4, ul { border: 1px solid red; } h3, h4 { color: red; }