Sélecteurs CSS avancés (partie 2)

Jusqu'à présent, un sélecteur CSS se résumait pour nous au nom d'un élément si bien que chaque élément de même nom dans un document Web avait le même style. Il existe des sélecteurs CSS avancés permettant de sélectionner un élément selon sa classe, son identifiant, sa position vis-à-vis d'autres éléments ou bien la valeur de ses attributs.

Sélecteurs d'attribut

Cette catégorie de sélecteurs repose sur l'existence ou la valeur d'un attribut au sein d'un élément.

E[attribute]

Sélecteur des éléments E avec un attribut de nom attribute.

p[lang] {
  font-style: italic;
}

<p lang="fr">
  L'hôtel est situé au centre ville dans une rue calme.
  Mais les chambres sont petites et la décoration
  est vieillote (Dominique, Reims)
</p>

<p lang="en">
  A very charming place, typically French especially
  the breakfast with croissants: a delight! (Judy, Manchester)
</p>

E[attribute=value]

Sélecteur des éléments E dont l'attribut attribute a pour valeur value.

p[lang="en"] {
  font-style: italic;
}

<p lang="fr">
  L'hôtel est situé au centre ville dans une rue calme.
  Mais les chambres sont petites et la décoration
  est vieillote (Dominique, Reims)
</p>

<p lang="en">
  A very charming place, typically French especially
  the breakfast with croissants: a delight! (Judy, Manchester)
</p>

E[attribute*=value]

Sélecteur des éléments Edont l'attribut attribute contient la sous-chaîne value.

E[attribute~=value]

Sélecteur des éléments E dont l'attribut attribute contient le mot value.

E[attribute^=value]

Sélecteur des éléments E dont l'attribut attribute commence par la sous-chaîne value.

E[attribute|=value]

Sélecteur des éléments E dont l'attribut attribute commence par le mot value.

E[attribute$=value]

Sélecteur des éléments E dont l'attribut attribute se termine par la sous-chaîne value.

<ul>
  <li><a href="http://www.twitter.com">Twitter</a></li>
  <li><a href="http://www.facebook.com">Facebook</a></li>
  <li><a href="http://www.instagram.com">Instagram</a></li>
</ul>

li a {
  color: white;
}

li a[href*="twitter"] {
  background-color: rgb(29, 161, 242);
}

li a[href*="facebook"] {
  background-color: rgb(59, 87, 157);
}

li a[href*="instagram"] {
  background-color: black;
}

Pseudo-classes

Ils permettent de sélectionner les éléments en fonction de leur état. Par exemple la pseudo-classe :hover permet de sélectionner l'élément survolé par le pointeur de la souris.

E:not

Sélecteur de tous les éléments sauf l'élément E.

E:first-child

Sélecteur de chaque élément E, premier enfant de leur élément parent.

E:nth-child(n)

Sélecteur de chaque élément E, enfant numéro n de leur élément parent.

E:nth-last-child(n)

Sélecteur de chaque élément E, enfant numéro n, en partant du dernier, de leur élément parent.

E:last-child

Sélecteur de chaque élément E, dernier enfant de leur élément parent.

li:first-child {
  text-decoration: overline;
}      

li:nth-child(2) {
  text-decoration: line-through;
}      

li:last-child {
  text-decoration: underline;
}

<ul>
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
</ul>

E:only-child

Sélecteur de chaque élément E, enfant unique de leur élément parent.

E:first-of-type

Sélecteur de chaque élément E, premier enfant de ce type de leur élément parent.

E:nth-of-type(n)

Sélecteur de chaque élément E, enfant numéro n de ce type de leur élément parent.

E:nth-last-of-type(n)

Sélecteur de chaque élément E, enfant numéro n de ce type, en partant du dernier, de leur élément parent.

E:last-of-type

Sélecteur de chaque élément E, dernier enfant de ce type de leur élément parent.

E:only-of-type

Sélecteur de chaque élément E, enfant unique de ce type de leur élément parent.

<header>
  <p>La Manif Pour Tous</p>
  <p>La Manif Pour Tous</p>
  <p>La Manif Pour Tous</p>
  <p>La Manif Pour Tous</p>
  <p>La Manif Pour Tous</p>
  <p>La Manif Pour Tous</p>
</header>

p {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-variant: small-caps;
  text-decoration: line-through;
  text-align: center;
}

p:first-child {
  background-color: red;
}

p:nth-child(2) {
  background-color: orange;
}

p:nth-child(3) {
  background-color: yellow;
}

p:nth-child(4) {
  background-color: green;
}

p:nth-child(5) {
  background-color: blue;
}

p:last-child {
  background-color: purple;
}

<h1>My favourite Kubrick's films</h1>

<ul>
  <li>Lolita (1962)</li>
  <li>Dr. Stangelove (1964)</li>
  <li>2001: A Space Odissey (1968)</li>
  <li>A Clockwork Orange (1971)</li>
  <li>The Shining (1980)</li>
  <li>Full Metal Jacket (1987)</li>
  <li>Eyes Wide Shut (1999)</li>
</ul>

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
  list-style-position: inside;
  color: rgb(38, 38, 38);
}

/*
 * Il est aussi possible d'utiliser un compteur pour sélectionner
 * tous les enfants de rang impair (odd) à l'aide de la syntaxe suivante :
 * 
 * li:nth-child(2n+1) 
 *
 */
li:nth-child(odd) {
  background-color: rgb(218, 217, 227);
  font-style: italic;
}

/*
 * Il est aussi possible d'utiliser un compteur pour sélectionner
 * tous les enfants de rang pair (even) à l'aide de la syntaxe suivante :
 * 
 * li:nth-child(2n) 
 *
 */
li:nth-child(even) {
  background-color: rgb(245, 245, 248);
}

Pseudo-éléments

Ils permettent de sélectionner une portion du contenu d'un élément : la première lettre, la première ligne ou la zone se trouvant au début ou à la fin du contenu.

E::first-letter

Sélecteur de la première lettre de l'élément E.

p::first-letter {
  float: left;
  font-size: 2.5em;
}

<p>
  Look, just because I don't be givin' no man a foot massage
  don't make it right for Marsellus to throw Antwone into a glass
  motherfuckin' house, fuckin' up the way the nigger talks.
  Motherfucker do that shit to me, he better paralyze my ass,
  'cause I'll kill the motherfucker, know what I'm sayin'?
</p>

E::first-line

Sélecteur de la première ligne de chaque élément E.

p::first-line {
  font-variant: small-caps;
  font-size: 1.25em;
}

<p>
  Look, just because I don't be givin' no man a foot massage
  don't make it right for Marsellus to throw Antwone into a glass
  motherfuckin' house, fuckin' up the way the nigger talks.
  Motherfucker do that shit to me, he better paralyze my ass,
  'cause I'll kill the motherfucker, know what I'm sayin'?
</p>

E::before

Sélecteur permettant d'insérer du contenu (texte ou image) au début de chaque élément E. Le contenu additionnel est référencé grâce à la propriété content.

E::after

Sélecteur permettant d'insérer du contenu (texte ou image) à la fin de chaque élément E. Le contenu additionnel est référencé grâce à la propriété content.

dfn::before {
  content: "«";
}

dfn::after {
  content: "»";
}

<p>
  Un <dfn>triangle rectangle</dfn> est un triangle avec un angle droit.
</p>

<p lang="fr">
  L'hôtel est situé au centre ville dans une rue calme.
  Mais les chambres sont petites et la décoration est vieillote.
  (Dominique, Reims)
</p>

<p lang="en">
  A very charming place, typically French especially
  the breakfast with croissants: a delight!
  (Judy, Manchester)
</p>

p[lang="fr"]::before {
  content: "Français";
  display: block;
  font-variant: small-caps;
  font-size: 0.7em;
  color: lightgrey;
}

p[lang="en"]::before {
  content: "English";
  display: block;
  font-variant: small-caps;
  font-size: 0.7em;
  color: lightgrey;
}

Crédits

Les textes utilisés dans les exemples ont été générés à l'aide des outils suivants :

• Lorem Ipsum
• Samuel L. Ipsum un générateur de texte s'inspirant des dialogues de Jules Winnfield (incarné par Samuel L. Jackson) dans Pulp Fiction.