Après les cours sur les règles principales css, vous pouvez aller plus loin dans la manière de cibler les éléments (X)HTML.
Ce cours css sur les sélecteurs css récapitule l'ensemble des sélecteurs css ainsi que leur compatibilité avec les navigateurs.

Sachez que vous pouvez combiner les sélecteurs css.

Le sélecteur css universel s'écrit *, il sélectionne tous les éléments.
Code HTML :
Dans l'exemple suivant, nous ciblons toutes les balises.
Exemple :

Dans l'exemple suivant, nous ciblons toutes les balises ayant pour classe "maclasse".
Exemple :

Dans l'exemple suivant, nous ciblons toutes les balises contenues dans la balise ayant pour classe "maclasse".
Exemple :

Le sélecteur css universel est reconnu par tous les navigateurs.

Le sélecteur css de type permet de sélectionner un balise (x)HTML précise.
Le sélecteur css de balise s'écrit en mettant le nom de la balise (X)HTML.
Code HTML :
Dans l'exemple suivant, nous ciblons toutes les balises B.
Exemple :

Dans l'exemple suivant, nous ciblons toutes les balises B contenu dans une balise B ayant comme classe "maclasse".
Exemple :

Le sélecteur css par type (ou sélecteur css par balise) est reconnu par tous les navigateurs.

Le sélecteur css d'id permet de sélectionner une balise ayant un id (je précise que la valeur de l'id est unique dans votre page HTML).
Le sélecteur css d'id s'écrit #VALEUR_DE_ID
Code HTML :
Dans l'exemple suivant, nous ciblons la balise ayant comme id "id_selecteurA".
Exemple :

Dans l'exemple suivant, nous ciblons la balise ayant comme classe "classe_selecteurB" et qui est contenu dans une balise id "id_selecteurB".
Exemple :

Le sélecteur css d'id est reconnu par tous les navigateurs.

Le sélecteur css de classe permet de sélectionner une balise ayant une classe.
Le sélecteur css de classe s'écrit .VALEUR_DE_CLASSE
Code HTML :
Dans l'exemple suivant, nous ciblons la balise ayant comme class "classe_selecteurB".
Code CSS :
Dans l'exemple suivant, nous ciblons la balise B ayant comme class "classe_selecteurB".
Code CSS :

Le sélecteur css de classe est reconnu par tous les navigateurs.

Le sélecteur css descendant permet de sélectionner un ou des enfants directs ou indirects.
Le sélecteur css descendant s'écrit : A B.
- A : un des types de sélecteur,
- B : un des types de sélecteur.
Soit sélectionne tous les éléments b contenu dans élément A.
Code HTML :
Dans l'exemple suivant, nous sélectionnons toutes les balises B contenu dans la balise P :
Code CSS :
Dans l'exemple suivant, nous ciblons plus précisément, nous sélectionnons toutes les balises B contenu dans la balise B ayant comme classe "maclasse" qui elle même est contenu dans une balise SPAN qui elle même est contenu dans une balise P :
Code CSS :

Le sélecteur css descendant est reconnu par tous les navigateurs.

Le sélecteur css d'enfant permet de sélectionner l'enfant direct.
Le sélecteur css d'enfant s'écrit : A > B.
- A : un des types de sélecteur,
- B : un des types de sélecteur.
Dans l'exemple suivant, la balise "B" contenant "css" n'est pas prise en compte puisqu'elle n'est pas l'enfant direct de "p" mais l'enfant direct de "b"
Code HTML :Code CSS :
Dans l'exemple suivant, nous ciblons les enfants directs de type SPAN qui ont comme enfants directs une balise B de classe maclasse qui elle même a comme enfants directs une balise B.
Code HTML :Code CSS :

Le sélecteur css d'enfant est reconnu par tous les navigateurs sauf Internet Explorer 6.

Le sélecteur css adjacent permet de sélectionner l'élément placé immédiatement après.
Le sélecteur css adjacent s'écrit : A + B.
- A : un des types de sélecteur,
- B : un des types de sélecteur.
Code HTML :
Dans l'exemple suivant, nous ciblons la balise SPAN adjacente à une balise SPAN.
Exemple :

Dans l'exemple suivant, nous ciblons la balise B adjacente à une balise B contenu dans une balise SPAN.
Exemple :

Le sélecteur css adjacent est reconnu par tous les navigateurs, sauf par Internet Explorer 6 et inférieure

Le sélecteur css d'attribut permet de sélectionner un balise (X)HTML en fonction de son attribut.
Le sélecteur css d'attribut permet peut prendre plusieurs valeurs :
- A[attribut], sélectionne l'élément A ayant comme attribut "attribut" quelles qu'en soient les valeurs.
- A[attribut=valeur], sélectionne l'élément A ayant comme attribut "attribut" et dont une des ses valeurs est égale à "valeur".
- A[attribut~=valeur], sélectionne l'élément A ayant comme attribut "attribut" et dont la valeur est une liste de valeurs séparée par des espaces et dont une de ses valeurs est égale à "valeur".
- A[attribut|=valeur], sélectionne l'élément A ayant comme attribut "attribut" et dont la valeur est une liste de valeurs séparée par des espaces et dont la première de ses valeurs est égale à "valeur-".

Le sélecteur css d'attribut est reconnu par tous les navigateurs, sauf par Internet Explorer 6 et inférieure

Le sélecteur css pseudo-classe permet de sélectionner un balise (X)HTML en fonction d'une "action" ou "état". first-child fait exception.
Dans les sélecteurs css pseudo-classe vous avez :
- A:link, état d'un lien non visité,
- A:visited, état d'un lien visité,
- A:hover, état d'un élément survolé avec la souris,
- A:focus, état d'un élément qui a le focus,
- A:active, état d'un élément qui est activé.
- A:lang, élément dont la langue est par exemple fr -> lang(fr).
- A:first-child, premier fils d'un élément.

Le sélecteur css pseudo-classe sont reconnus par tous les navigateurs, cependant suivant la manière dont ils sont utilisés cela ne fonctionne pas.
Je vous invite donc à allez voir chaque définition css :
- A:link,
- A:visited
- A:hover,
- A:focus,
- A:active,
- A:lang,
- A:first-child,

Le sélecteur pseudo-éléments permet de sélectionner des "parties de code" qui ne sont pas disponibles en tant que nœuds dans l'arbre du document.
Dans les sélecteurs css pseudo-éléments vous avez :
- A:first-line, première ligne d'un élément A,
- A:first-letter,première lettre d'un élément A,
- A:after, insérer du contenu généré après un élément A,
- A:before, insérer du contenu généré avant un élément A.

Le sélecteur css pseudo-éléments ne sont reconnus par tous les navigateurs.
Je vous invite donc à allez voir chaque définition css :
- A:first-line,
- A:first-letter
- A:after,
- A:before.