L1 Info : Informatique et Document, CSS
 
◃  Ch. 5 Les sélecteurs  ▹
 

Sélecteurs contextuels

  • Sélecteurs de descendant
    • Descendant indéterminé : ancêtre élément
      Exemple : table p : cible tous les paragraphes qui apparaissent dans un tableau
    • Descendant direct : père > élément
      Exemple : th > p : cible uniquement les paragraphes directement inclus dans une cellule de titre de tableau
    • Élément premier fils d'une autre (pseudo-classe) : élément:first-child
      Exemple : td:first-child : cible uniquement les premières cellules d'une ligne de tableau
  • Sélecteurs de frère : frère + élément
    Exemple : h1 + p : cible uniquement les paragraphes qui suivent immédiatement un titre de niveau 1 (i.e. qui sont ouverts juste après la fermeture d'un élément h1
  • Sélecteurs d'attributs :
    • elt[attr] : l'élément elt est associé à l'attribut attr
      Exemple : table[border] : cible tous les tableaux définis avec une bordure
    • elt[attr="val"] : l'attribut attr de l'élément elt vaut val
      Exemple : table[border="2"] : cible tous les tableaux associés à l'attribut border et ayant 2 comme valeur
    • elt[attr~="val"] : val est une des valeurs de l'attribut attr de l'élément elt (utile avec les attributs acceptant plusieurs valeurs)