- Principales propriétés
- Texte
- Blocs
- Positionnement
- Tableaux
- Listes
Voici la liste des sélecteurs utilisés en CSS
Les compatibilités sont tirées du livre CSS2 de raphaël Goetter
| Sélecteur | Utilité | Support par les navigateurs | ||
|---|---|---|---|---|
| IE6 | Firefox 1.x | Opera | ||
* |
Sélecteur universel : applique les règles CSS à tous les éléments de la page, même les propriétés de bloc |  |
 |
|
balise |
Sélecteur de balise : applique la eègle à toutes les balises "balise" de la page | |
|
|
selecteur1 selecteur2 |
Sélecteur hierarchique : applique la règle à tous les éléments correspondant à "selecteur2" contenues dans les éléments "selecteur1" | |
|
|
selecteur1, selecteur2 |
Sélecteur de regroupement : applique le style aux éléments correspondant à "selecteur1" ainsi que ceux correspondant à "selecteur2". | |
|
|
selecteur1 > selecteur2 |
Sélecteur d'enfant : sélectionne un enfant direct de "selecteur1" correspondant à "selecteur2" |  |
|
|
selecteur1 + selecteur2 |
Sélecteur de succession. Applique le style à l'élément correspondant à "selecteur2" qui suit directement dans le code HTML l'élément "selecteur1" | |
|
|
#id |
Sélecteur d'id : applique le style à l'élément d'id="id" correspondant. | |
|
|
.classe |
Sélecteur de classe : applique le style aux éléments de classe="classe". | |
|
|
[attribut] |
Sélecteur d'attribut : applique le style aux éléments dont l'attribut "attribut" est renseigné. | |
|
|
[attribut ="valeur"] |
Sélecteur de valeur d'attribut : applique le style aux éléments dont l'attribut "attribut" est renseigné et vaut exactement "valeur". | |
|
|
[attribut ~="valeur"] |
Sélecteur de valeur d'attribut : applique le style aux éléments dont l'attribut "attribut" est renseigné et dont une des valeursvaut exactement "valeur". | |
|
|
[attribut ¦="valeur"] |
Sélecteur de valeur d'attribut : applique le style aux éléments dont l'attribut "attribut" est renseigné et dont la valeur commence par "valeur". | |
|
|
element:active |
Lorsque l'utilisateur active l'élément "element" (ex : lors du clic sur un bouton) | |
|
|
element:hover |
Lorsque l'utilisateur passe son pointeur sur l'élément "element" (survol par la souris) | |
|
|
element:active |
Lorsque l'utilisateur active l'élément "element" (ex : lors du clic sur un lien) | |
|
|
element:focus |
Lorsque l'utilisateur selectionne l'élément (avec le clavier par exemple) | |
|
|
:link |
Liens non visités | |
|
|
:visited |
Liens visités | |
|
|
element:first-child |
Premier élément enfant de l'élément "element" | |
|
|
element:lang(langue) |
Si la langue enployée (daclarée dans l'en-tête) et "langue" | |
|
|
element:first-letter |
Première lettre de l'élément "element" | |
|
|
element:first-line |
Première ligne de l'élément "element". La première ligne dépend de la largeur de la page, de la police, de la taille de la police ... | |
|
|
element:after |
Permet d'insérer des éléments juste après l'élément. Utiliser avec la propriété 'content:' | |
|
|
element:before |
Permet d'insérer des éléments juste avant l'élément. Utiliser avec la propriété 'content:' | |
|
|