Retour à la liste

CSS3 : sélecteurs, pseudo-classes et pseudo-éléments

Créé : 13.05.2013, 15:10:59  -  Modifié : 07.12.2018, 15:26:25
Avec la compatibilité grandissante des navigateurs avec CSS3 et la panoplie de nouveautés qu’apporte cette version, il serait dommage de ne pas en profiter pour transcender vos designs web. Aussi j’ai pensé qu’un petit pense-bête et quelques exemples seraient profitables.
 
Rappels de terminologie
 
* { /* sélecteur universel */
    propriete : valeur;
}
 
element { /* sélecteur de type */
    propriete : valeur;
}
 
element.maClasse { /* sélecteur de classe */
    propriete : valeur;
}
 
element#monIdentifiant { /* sélecteur d'ID */
    propriete : valeur;
}
 
<!-- balise auto fermante sans contenu -->
<element attribut1="valeur1" attribut2="valeur2" />
 
<!-- balise normale avec contenu --> 
<element attribut1="valeur1" attribut2="valeur2"></element>
Les sélecteurs d’attributs
Les sélecteurs d’attributs permettent de styler un élément en fonction d’un attribut de la balise et/ou de sa valeur .
 
1. Eléments <img> dotées d’un attribut alt
 
img[alt] {
    border:1px solid #000;
}
 
<img src="image.png" alt="Texte alternatif" />
2. Eléments <input> dont l’attribut type a exactement pour valeur “text”
 
input[type="text"] {
    border:1px solid green;
}
 
<input type="text" id="name" />
3. Eléments <input> dont les attributs text et name ont respectivement les valeurs “text” et “prenom”
 
input[type="text"][name="prenom"] {
    text-transform:uppercase;
}
 
<input type="text" name="prenom" />
4. 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"] {
    text-transform:uppercase;
}
 
<input type="text" name="Pierre Jean Paul" />
5. Eléments <input> dont l’attribut name a une valeur commençant exactement par “Pierre”
 
input[name^="Pierre"] {
    text-transform:uppercase;
}
 
<input type="text" name="Pierre Jean Paul" />
6. Eléments <input> dont l’attribut name a une valeur terminant exactement par “Paul”
 
input[name$="Paul"] {
    text-transform:uppercase;
}
 
<input type="text" name="Pierre Jean Paul" />
7. Eléments <input> dont l’attribut name a une valeur contenant la sous-chaîne “JeanPaul”
 
input[name*="JeanPaul"] {
    text-transform:uppercase;
}
 
<input type="text" name="PierreJeanPaul" />
8. 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"] {
    text-transform:uppercase;
}
 
<input type="text" name="Pierre-Jean-Paul" />
Les pseudo-classes
Les pseudo-classes portent sur des éléments existants dans le code source du document et auxquels on peut accéder par des caractéristiques autres que leur nom, attribut ou contenu. La pseudo-classe :first-child, par exemple, correspond au premier élément enfant d’un autre élément.
Exemples de pseudo-classes :
 
strcturelles : :first-child, :last-child, nth-child(n)
d’ancres :link et :visited
dynamiques :hover, :active et :focus
de langue :lang()
1. La pseudo-classe :first:child désigne le premier élément fils de son parent
 
div > p:first-child {
    font-weight:bold;
}
 
<div>
  <p>La CSS me concerne.</p>
  <p>La CSS ne me concerne pas.</p>
</div>
2. La pseudo-classe :focus désigne l’action de se placer sur l’élément concerné
 
input[type="text"]:focus {
    background:blue;
}
 
<input type="text" id="name" />
 
 
Les pseudo-éléments
Les pseudo-éléments créent une abstraction dans l’arborescence du document. Il permettent de donner un style à un contenu n’apparaissant pas dans le code source du document comme étant un élément. On peut par exemple, avec ::first-line, donner un style à la première ligne d’un paragraphe (dépend donc du formattage). Notez la notation avec le double :: pour les pseudo-éléments.
Exemples de pseudo-éléments :
 
::first-line
::first-letter
::before et :after
 
p::first-line {
    font-weight:bold;
}
 
<p>Aenean rhoncus ante in ligula suscipit sit amet dignissim urna hendrerit. In euismod vehicula neque.</p>
 
 
Les combinateurs
Les combinateurs permettent d’agir sur un élément en fonction de sa relation avec un autre.
 
1. Les sélecteurs de noeuds descendants. Comprenez tous les éléments <em> contenus dans l’élément <h1>
 
 
h1 em {
    font-size:2em;
}
 
<h1>Ce <span>titre est <em>vraiment</em> important</span></h1>
2. Les sélecteurs de noeuds enfants. Comprenez seuls les éléments <a> dont le parent direct est l’élément <div>
 
 
div > a {
    font-weight:bold;
}
 
<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>
3. Les sélecteurs de noeud adjacent. Comprenez l’élément <p> immédiatement précédé par <h1>
 
h1 + p {
    font-weight:bold;
}
 
<h1>Titre</h1>
<p>La CSS me concerne.</p>
<p>La CSS ne me concerne pas.</p>
4. Les sélecteurs de noeuds frères. Comprenez tous les éléments <pre> suivants l’élément <h1> mais au même niveau que lui
 
h1 ~ pre {
    font-weight:bold;
}
 
<h1>Fonction a</h1>
<p>Fonction a(x) :</p>
<pre>function a(x) = 12x/13.5</pre>
Enfin, lorsque vous combinez plusieurs sélecteurs ayant le même parent, il ne faut pas omettre ce dernier pour chacun d’entre eux.
 
/* FAUX */
.post .postIntroduction, .postConclusion {
    font-weight:bold;
}
 
/* CORRECT */
.post .postIntroduction, .post .postConclusion {
    font-weight:bold;
}
 
<div class="post">
  <p class="postIntroduction">L'introduction est en gras.</p>
  <p>La CSS ne me concerne pas.</p>
  <p class="postConclusion">La conclusion est en gras.</p>
</div>
Si vous souhaitez en apprendre davantage, je vous conseille d’aller faire un petit tour sur la doc officielle des CSS.

Rendu :0.0699 | Mémoire :2.89MB

Accueil | Informations | Top