Les sélecteurs, pseudo-classes et pseudo-éléments en CSS3

En gros, les sélecteurs servent par le biais d’une “requête CSS” d’atteindre un nœud dans un DOM et de lui attribuer un style défini.

Avec l’évolution des navigateurs et les parts de marché qu’occupent les navigateurs modernes qui se multiplient de jour en jour nous poussent à évoluer aussi.
Du coup il serait vraiment dommage de ne pas exploiter les sélecteurs apporter par le CSS3, pour booster notre productivité et pourquoi pas pour nous faciliter les tâches.

Apporté déjà par le CSS2 , nombreux sélecteurs étaient déjà indispensable, mais avec CSS3 on pourra encore aller plus loin, tout en étant plus précise.
Mais pour mieux avancer on va faire un petit rappel sur les sélecteurs du CSS2. (source : W3C)

Motif Signification
* Correspond à tout élément.
E Correspond à tout élément E (c.à.d., un élément de type E).
E F Correspond à tout élément F qui est un descendant de l’élément E.
E > F Correspond à tout élément F aussi un enfant de l’élément E.
E:first-child Correspond à un élément E aussi le premier enfant de son élément parent.
E:link, E:visited Correspond à un élément E qui est une ancre dans la source dont le lien n’a pas été visité (:link) ou bien l’a déjà été (:visited).
E:active, E:hover, E:focus Correspond à l’élément E au cours de certaines actions de l’utilisateur.
E:lang(c) Correspond à l’élément de type E qui emploie une langue c (la détermination de cette langue est spécifique au langage du document).
E + F Correspond à tout élément F immédiatement précédé par un élément E.
E[foo] Correspond à tout élément E avec l’attribut “foo” (quelles qu’en soient les valeurs).
E[foo="warning"] Correspond à tout élément E dont l’attribut “foo” a exactement la valeur “warning”.
E[foo~="warning"] Correspond à tout élément E dont l’attribut “foo” a pour valeur une liste de valeurs séparées par des caractères blancs et dont une de celles-ci est “warning”.
E[lang|="en"] Correspond à tout élément E dont l’attribut “lang” a pour valeur une liste de valeurs séparées par des tirets, cette liste commençant (à gauche) par “en”.
DIV.warning Seulement en HTML. Identique à DIV[class~="warning"].
E#myid Correspond à tout élément E dont l’ID est “myid”.

Les sélecteurs CSS3

Le module des Sélecteurs CSS3 a atteint sa maturité en septembre 2011 pour être parmi les premiers à avoir atteint le stade de Recommandation. La majorité des navigateurs les supportent IE8 incluse.
Parmi les nouveautés incluses dans CSS3 incluent les sélecteurs : d’attributs, les pseudo-classes et les pseudo-éléments

Les sélecteurs d’attributs

Les sélecteurs d’attributs est constitué de trois cas d’utilisations :

Ce cas d’utilisation permet de sélectionner un dont l’attribut “attr” commence exactement par la valeur “textValue”

Ce cas d’utilisation permet de sélectionner un dont l’attribut “attr” fini exactement par la valeur “textValue”

Ce cas d’utilisation permet de sélectionner un dont l’attribut “attr” comporte au moins une valeur de “textValue”

Les pseudo-classes

Si on veut accéder à un élément sans prendre en compte leur nom, attribut ou contenu, on peut utiliser une pseudo-classe.

Par exemple
:first-child, désigne le premier élément fils de son parent

Autre exemples de pseudo-classes :
  • structurelles : :first-child, :last-child, nth-child(n)
  • d’ancres :link et :visited
  • dynamiques :hover, :active et :focus
  • de langue :lang()

Les pseudo-éléments

Les pseudo-éléments est une alternative à l’ajout de nouveau élément dans l’arborescence du document.
Elle ne permettra de cibler et de donner un style à un contenu n’apparaissant pas dans le code source du document comme étant un élément.

Par exemple si on veut donner un style à la premier ligné d’un paragraphe, il suffit de :

Notez la notation avec le double :: pour les pseudo-éléments qui les différencient des pseudo-classes.
Autres exemples de pseudo-éléments :

  • ~ (CSS3)
  • ::after, ::before
  • :first-child
  • :first-of-type
  • :last-child
  • :last-of-type
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :target

Une réponse à “Les sélecteurs, pseudo-classes et pseudo-éléments en CSS3”

  1. Phil

    merci pour l’article, interessant

    Répondre

Répondre