PRATIQUE CSS  
Identifier les sélecteurs CSS
 
Conçus pour appliquer des styles aux balises HTML, des classes aux attributs, les sélecteurs CSS sont nombreux et variés. Tour d'horizon de leurs syntaxe et signification. (20/03/2007)
  Forum

Réagissez dans les forums de JDN Développeurs

Format approuvé par le W3C définissant des styles de mise en page Web. Dans sa version 1, le format CSS définit des centaines de mises en page possibles pour des documents HTML qui seront calqués sur un format de référence.

Dans sa version 2, CSS prend en compte le langage XML, les présentations parlées destinées aux malvoyants, les polices de caractères téléchargeables, etc. L'usage de balises sémantiques liées à des règles CSS octroie un gain de temps significatif tant lors de la création d'un site Web que lors de sa refonte. Le double intérêt : respecter la logique du contenu, et ne travailler que sur une seule feuille de style pour l'ensemble des pages (même pour les sites en possédant des milliers).

Voici un tableau récapitulatif des différents sélecteurs CSS, avec leur syntaxe et leur signification. Il est utile de les reconnaître, les identifier pour bien les utiliser.

Sélecteurs CSS
Sélecteur
Syntaxe
Signification
Sélecteur universel
*
Correspond à tout élément.
Sélecteurs de type
E
Correspond à tout élément E (c.à.d., un élément de type E).
Sélecteurs descendants
E F
Correspond à tout élément F qui est un descendant de l'élément E.
Sélecteurs d'enfant
E > F
Correspond à tout élément F aussi un enfant de l'élément E.
La pseudo-classe :first-child
E:first-child
Correspond à un élément E aussi le premier enfant de son élément parent.
Les pseudo-classes de lien
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).
Les pseudo-classes dynamiques
E:active
E:hover
E:focus
Correspond à l'élément E au cours de certaines actions de l'utilisateur.
La pseudo-classe :lang()
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).
Les sélecteurs adjacents
E + F
Correspond à tout élément F immédiatement précédé par un élément E.
Sélecteurs d'attribut
E[foo]
Correspond à tout élément E avec l'attribut "foo" (quelles qu'en soient les valeurs).
Sélecteurs d'attribut
E[foo="warning"]
Correspond à tout élément E dont l'attribut "foo" a exactement la valeur "warning".
Sélecteurs d'attribut
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".
Sélecteurs d'attribut
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".
Sélecteurs de classe
DIV.warning
Seulement en HTML. Identique à DIV[class~="warning"].
Sélecteurs d'ID
E#myid
Correspond à tout élément E dont l'ID est "myid".
Source : Jérôme Forget, 2006

Ce contenu a été réalisé par Jérôme Forget sous licence Creative Commons.



Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius
 
Rédaction JDN
 
 
Accueil | Haut de page