Sélecteurs CSS avancés

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.

Classes et identifiants

L'utilisation des sélecteurs de classe et d'identifiant requiert l'ajout d'attributs au sein des éléments HTML concernés.

.classname

Sélecteur des éléments dont l'attribut class a pour valeur classname.

body {
  font-family: Helvetica, sans-serif;
}

.latin {
  font-family: Georgia, serif;
  font-style: italic;
}
<h1>I'm serious as a heart attack</h1>
<p class="latin">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
  The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men.
</p>
<p class="latin">
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

I'm serious as a heart attack

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

#idname

Sélecteur de l'élément dont l'attribut id a pour valeur idname.

La valeur idname de l'attribut id doit être unique au sein d'un document Web.

body {
  font-family: Helvetica, sans-serif;
}

#latin {
  font-family: Georgia, serif;
  font-style: italic;
}
<h1>I'm serious as a heart attack</h1>
<p>
  Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children.
</p>
<p id="latin">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

I'm serious as a heart attack

Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Sélecteurs contextuels

Ils permettent de sélectionner des éléments en fonction de leur contexte, c'est-à-dire de leur position vis-à-vis d'autres éléments du même document Web.

E, F

Sélecteur des éléments E et F.

h1, h2 {
  font-variant: small-caps;
}
<h1>Uuummmm, this is a tasty burger!</h1>
<h2>We happy?</h2>
<p>
  Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine.
</p>

Uuummmm, this is a tasty burger!

We happy?

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine.

E + F

Sélecteur des éléments F situés immédiatement après un élément E.

body {
  font-family: Helvetica, sans-serif;
}

h1 + p {
  font-family: Georgia, serif;
  font-style: italic;
}
<h1>Are you ready for the truth?</h1>
<p>
  Do you see any Teletubbies in here?
</p>
<p>
  Do you see a little Asian child with a blank expression on his face?
</p>
<p>
  No? Well, that's what you see at a toy store. And you must think you're in a toy store.
</p>

Are you ready for the truth?

Do you see any Teletubbies in here?

Do you see a little Asian child with a blank expression on his face?

No? Well, that's what you see at a toy store. And you must think you're in a toy store.

E ~ F

Sélecteur des éléments F précédés d'un élément E.

body {
  font-family: Helvetica, sans-serif;
}

h1 ~ p {
  font-family: Georgia, serif;
  font-style: italic;
}
<h1>Are you ready for the truth?</h1>
<p>
  Do you see a slender plastic tag clipped to my shirt with my name printed on it?
</p>
<p>
  Do you see a little Asian child sitting outside on a mechanical helicopter?
</p>
<p>
  And you must think you're in a toy store, because you're here shopping for an infant named Jeb.
</p>

Are you ready for the truth?

Do you see a slender plastic tag clipped to my shirt with my name printed on it?

Do you see a little Asian child sitting outside on a mechanical helicopter?

And you must think you're in a toy store, because you're here shopping for an infant named Jeb.

E > F

Sélecteur des éléments F dont le parent direct est un élément E.

body {
  font-family: Helvetica, sans-serif;
}

article > p {
  font-family: Georgia, serif;
  font-style: italic;
}
<article>
  <p>
    Well, the way they make shows is, they make one show. That show's called a pilot.
  </p>
  <blockquote>
    <p>
      Some pilots get picked and become television programs.
      Some don't, become nothing.
    </p>
  </blockquote>
  <p>
    She starred in one of the ones that became nothing.
  </p>
</article>

Well, the way they make shows is, they make one show. That show's called a pilot.

Some pilots get picked and become television programs. Some don't, become nothing.

She starred in one of the ones that became nothing.

E F

Sélecteur des éléments F inclus dans un élément E.

body {
  font-family: Helvetica, sans-serif;
}

article p {
  font-family: Georgia, serif;
  font-style: italic;
}
<article>
  <p>
    Well, the way they make shows is, they make one show. That show's called a pilot.
  </p>
  <blockquote>
    <p>
      Some pilots get picked and become television programs.
      Some don't, become nothing.
    </p>
  </blockquote>
  <p>
    She starred in one of the ones that became nothing.
  </p>
</article>

Well, the way they make shows is, they make one show. That show's called a pilot.

Some pilots get picked and become television programs. Some don't, become nothing.

She starred in one of the ones that became nothing.

Exercice 22

Uniquement à l'aide de sélecteurs CSS contextuels, stylisez (conformément à l'exemple) le code HTML ci-dessous.

body {
  font-family: serif;
}
<h1>Uuummmm, this is a tasty burger!</h1>
<p>
  Yeah, I like animals better than people sometimes...
</p>
<p>
  Especially dogs.
</p>

<article>
  <h2>We happy?</h2>
  <p>
    Dogs are the best.
  </p>
  <section>
    <p>
      And the good thing about dogs...
    </p>
    <p>
      is they got different dogs for different people.
    </p>
  </section>
</article>

<p>
  Give me... Raoul.
</p>
<p>
  Right, Omar? Give me Raoul.
</p>

Uuummmm, this is a tasty burger!

Yeah, I like animals better than people sometimes...

Especially dogs.

We happy?

Dogs are the best.

And the good thing about dogs...

is they got different dogs for different people.

Give me... Raoul.

Right, Omar? Give me Raoul.

Correction


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>

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)

A very charming place, typically French especially the breakfast with croissants: a delight! (Judy, Manchester)

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>

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)

A very charming place, typically French especially the breakfast with croissants: a delight! (Judy, Manchester)

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.

Un mot est différent d'une sous-chaîne dans la mesure où il est délimité par des espaces.

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.

Exercice 23

Utilisez des sélecteurs CSS avancés afin de styliser (conformément à l'exemple) le code HTML ci-dessous.

<ul>
  <li><a href="http://www.facebook.com">Facebook</a></li>
  <li><a href="http://www.twitter.com">Twitter</a></li>
  <li><a href="http://www.rss.com">RSS</a></li>
</ul>
Facebook icon        Twitter icon        RSS icon

Correction

Exercice 24

Utilisez des sélecteurs CSS afin de trier et de colorier le fond des images selon leur format (PNG ou JPEG).

<img src="pic01.png" alt="1">
<img src="pic02.jpg" alt="2">
<img src="pic03.jpg" alt="3">
<img src="pic04.png" alt="4">
<img src="pic05.png" alt="5">
<img src="pic06.jpg" alt="6">
<img src="pic07.jpg" alt="7">
<img src="pic08.png" alt="8">
<img src="pic09.png" alt="9">
<img src="pic10.jpg" alt="10">
<img src="pic11.jpg" alt="11">
<img src="pic12.png" alt="12">
1 2 3 4 5 6 7 8 9 10 11 12

Correction


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.

Le paramètre n peut être une constante numérique, un mot clé (odd pour désigner un nombre impair ou even pour un nombre pair) ou enfin une expression arithmétique. Par exemple, l'expression 3n désigne tous les multiples de trois, l'expression 5n+1 désigne tous les multiples de cinq plus un.

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.

Exercice 25

Redonnez un peu de couleur à ce slogan un peu terne à l'aide de sélecteurs CSS (sans bien sûr toucher à une seule ligne du code HTML).

<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>

La Manif Pour Tous

La Manif Pour Tous

La Manif Pour Tous

La Manif Pour Tous

La Manif Pour Tous

La Manif Pour Tous

Correction

Exercice 26

Utilisez uniquement deux sélecteurs CSS pour reproduire la mise en page suivante à partir du code HTML fourni.

<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>

My favourite Kubrick's films

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

Correction


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>

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'?

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>

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'?

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>
Un «triangle rectangle» est un triangle avec un angle droit.

Exercice 27

Utilisez des sélecteurs CSS avancés pour reproduire la mise en page suivante à partir du code HTML fourni.

<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>

Français 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)

English A very charming place, typically French especially the breakfast with croissants: a delight! (Judy, Manchester)

Correction

Crédits

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