CSS - Sélecteurs

gistfile1.md

#CSS - Sélecteurs#

##Les sélecteur d'attributs##

Eléments <img> dotées d’un attribut alt :

img[alt]

<img src="image.png" alt="Texte alternatif" />

Eléments <input> dont l’attribut type a exactement pour valeur “text” :

input[type="text"]

<input type="text" id="name" />

Eléments <input> dont les attributs type et name ont respectivement les valeurs text et prenom :

input[type="text"][name="prenom"]

<input type="text" name="prenom" />

Eléments <input> dont l’attribut name contient une liste de valeurs séparées par un espace, dont une est exactement “Paul” :

input[name~="Jean"]

<input type="text" name="Pierre Jean Paul" />

Eléments <input> dont l’attribut name a une valeur commençant exactement par Pierre :

input[name^="Pierre"]

<input type="text" name="Pierre Jean Paul" />

Eléments <input> dont l’attribut name a une valeur terminant exactement par Pierre :

input[name$="Paul"]

<input type="text" name="Pierre Jean Paul" />

Eléments <input> dont l’attribut name a une valeur contenant la sous-chaîne JeanPaul :

input[name*="JeanPaul"]

<input type="text" name="PierreJeanPaul" />

Eléments <input> dont l’attribut name contient une liste de valeurs séparées par un tiret et commençant par Pierre :

input[name|="Pierre"]

<input type="text" name="Pierre-Jean-Paul" />

##Les pseudo-classes##

Cible le premier élément enfant d’un autre élément :

div > p:first-child

<div>
  <p>La CSS me concerne.</p>
  <p>La CSS ne me concerne pas.</p>
</div>

Cible le dernier élément enfant d’un autre élément :

div > p:last-child

<div>
  <p>La CSS ne me concerne pas.</p>
  <p>La CSS me concerne.</p>
</div>

Cible les 4 premiers éléments d'une liste :

li:nth-child(-n+4)

Cible les 4 derniers éléments d'une liste :

li:nth-last-child(-n+4)

Cible tous les liens de la page sauf ceux qui contiennent la chaîne "alsacreations" :

a:not([href*="alsacreations"])

##Les pseudo-éléments##

Cible la première ligne d’un paragraphe :

p::first-line

<p>Aenean rhoncus ante in ligula suscipit sit amet dignissim urna hendrerit. In euismod vehicula neque.</p>

Cible le premier caractère d’un paragraphe :

p::first-letter

<p>Aenean rhoncus ante in ligula suscipit sit amet dignissim urna hendrerit. In euismod vehicula neque.</p>

##Les combinateurs##

Sélecteurs de noeuds descendants : cible tous les éléments <em> contenus dans l’élément <h1> :

h1 em

<h1>Ce 
  <span>titre est 
    <em>vraiment</em>
    important
  </span>
</h1>

Sélecteurs de noeuds enfants : cible les éléments <a> dont le parent direct est l’élément <div> :

div > a

<div>
  <a href="#">La CSS me concerne</a>
  <ul>
    <li><a href="#">La CSS ne me concerne pas</a></li>
    <li><a href="#">La CSS ne me concerne pas</a></li>
  </ul>
  <a href="#">La CSS me concerne</a>
</div>

Sélecteurs de noeud adjacent : cible l'élement <p> immédiatement précédé par <h1> :

h1 + p

<h1>Titre</h1>
<p>La CSS me concerne.</p>
<p>La CSS ne me concerne pas.</p>

Sélecteurs de noeuds frères : cible tous les paragraphes <p> qui suivent un titre <h1> :

h1 ~ p

<h1>Fonction a</h1>
<span>function a(x) = 12x/13.5</span>
<p>Fonction a(x) :</p>

Séquence	Signification
*	tout élément
E	tout élément de type E
E[foo]	tout élément E portant l'attribut "foo"
E[foo="bar"]	tout élément E portant l'attribut" foo" et dont la valeur de cet attribut est exactement "bar"
E[foo~="bar"]	tout élément E dont l'attribut "foo" contient une liste de valeurs séparées par des espaces, l'une de ces valeurs étant exactement égale à "bar"
E[foo^="bar"]	tout élément E dont la valeur de l'attribut "foo" commence exactement par la chaîne "bar"
E[foo$="bar"]	tout élément E dont la valeur de l'attribut "foo" finit exactement par la chaîne "bar"
E[foo*="bar"]	tout élément E dont la valeur de l'attribut "foo" contient la sous-chaîne "bar"
E[lang|="en"]	tout élément E dont l'attribut 'lang" est une liste de valeurs séparées par des tirets et commençant (à gauche) par "en"
E:root	un élément E, racine du document
E:nth-child(n)	un élément E qui est le n-ième enfant de son parent
E:nth-last-child(n)	un élément E qui est le n-ième enfant de son parent en comptant depuis le dernier enfant
E:nth-of-type(n)	un élément E qui est le n-ième enfant de son parent et de ce type
E:nth-last-of-type(n)	un élément E qui est le n-ième enfant de son parent et de ce type en comptant depuis le dernier enfant
E:first-child	un élément E, premier enfant de son parent
E:last-child	un élément E, dernier enfant de son parent
E:first-of-type	un élément E, premier enfant de son type
E:last-of-type	un élément E, dernier enfant de son type
E:only-child	un élément E, seul enfant de son parent
E:only-of-type	un élément E, seul enfant de son type
E:empty	un élément E qui n'a aucun enfant (y compris noeuds textuels purs)
E:link E:visited	un élément E qui est la source d'un hyperlien dont la cible n'a pas encore été visitée (:link) ou a déjà été visitée (:visited)
E:active E:hover E:focus	un élément E pendant certaines actions de l'usager
E:target	un élément E qui est la cible de l'URL d'origine contenant lui-même un fragment identifiant.
E:lang(c)	un élément E dont le langage (humain) est c (le langage du document spécifie comment le langage humain est déterminé)
E:enabled E:disabled	un élément d'interface utilisateur E qui est actif ou inactif.
E:checked E:indeterminate	un élément d'interface utilisateur E qui est coché ou dont l'état est indéterminé (par exemple un bouton-radio ou une case à cocher)
E:contains("foo")	un élément E dont le contenu textuel concaténé contient la sous-chaîne "foo"
E::first-line	la première ligne formatée d'un élément E
E::first-letter	le premier caractère formaté d'un élément E
E::selection	la partie d'un élément E qui est actuellement sélectionnée/mise en exergue par l'usager
E::before	le contenu généré avant un élément E
E::after	le contenu généré après un élément E
E.warning	Uniquement en HTML. Identique à E[class~="warning"].
E#myid	un élément E dont l'ID est égal à "myid".
E:not(s)	un élément E qui n'est pas représenté par le sélecteur simple s
E F	un élément F qui est le descendant d'un élément E
E > F	un élément F qui est le fils d'un élément E
E + F	un élément F immédiatement précédé par un élément E
E ~ F	un élément F précédé par un élément E