Sélecteurs CSS avancés (partie 1)

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>

#idname

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

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>

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>

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>

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

<p>
  Do you see any Teletubbies in here?
</p>
<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>

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>

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>

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>

body {
  font-family: serif;
}

h1 + p {
  font-variant: smallcaps;
}

article p {
  font-style: italic;
}

article > p {
  text-decoration: underline; 
}

article ~ p {
  font-family: sans-serif;
}

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.