CSS (Cascading Style Sheet)

contenu
menu
navigation
outils

Les types de sélecteurs

Types

Quels règles permettent de mettre l'écriture de tous les paragraphes en rouge ?

<section>
  <p id='paragraphe'>paragraphe 1</p>
  <p>paragraphe 2</p>
  <p class='paragraphe'>paragraphe 3</p>
  <p lang='paragraphe'>paragraphe 4</p>
</section>  

<section>
  <p id='paragraphe'>paragraphe 1</p>
  <p>paragraphe 2</p>
  <p class='paragraphe'>paragraphe 3</p>
  <p lang='paragraphe'>paragraphe 4</p>
</section>

Choix attendu

p { color : red ; }
Tous les paragraphes auront une couleur d'écriture rouge.
.paragraphe { color : red ; }
Seuls les paragraphes de classe paragraphe auront une couleur d'écriture rouge.
#paragraphe { color : red ; }
Seuls les paragraphes d'identifiant paragraphe auront une couleur d'écriture rouge.
[lang] { color : red ; }
Seuls les paragraphes avec un attribut lang auront une couleur d'écriture rouge.

Types

Quels règles permettent de mettre l'écriture d'au moins un paragraphe en rouge ?

<section>
  <p id='paragraphe'>paragraphe 1</p>
  <p>paragraphe 2</p>
  <p class='paragraphe'>paragraphe 3</p>
  <p lang='paragraphe'>paragraphe 4</p>
</section>  

<section>
  <p id='paragraphe'>paragraphe 1</p>
  <p>paragraphe 2</p>
  <p class='paragraphe'>paragraphe 3</p>
  <p lang='paragraphe'>paragraphe 4</p>
</section>

Choix attendu

p { color : red ; }
Tous les paragraphes auront une couleur d'écriture rouge.
.paragraphe { color : red ; }
Seuls les paragraphes de classe paragraphe auront une couleur d'écriture rouge.
#paragraphe { color : red ; }
Seuls les paragraphes avec l'identifiant paragraphe auront une couleur d'écriture rouge.
[lang] { color : red ; }
Seuls les paragraphes avec l'attribut lang auront une couleur d'écriture rouge.

Types

Quels règles permettent de mettre l'écriture du troisième paragraphe en rouge ?

<section>
  <p id='paragraphe'>paragraphe 1</p>
  <p>paragraphe 2</p>
  <p class='paragraphe'>paragraphe 3</p>
  <p lang='paragraphe'>paragraphe 4</p>
</section>  

<section>
  <p id='paragraphe'>paragraphe 1</p>
  <p>paragraphe 2</p>
  <p class='paragraphe'>paragraphe 3</p>
  <p lang='paragraphe'>paragraphe 4</p>
</section>

Choix attendu

p { color : red ; }
Tous les paragraphes auront une couleur d'écriture rouge.
.paragraphe { color : red ; }
Tous les paragraphes de classe paragraphe auront une couleur d'écriture rouge.
#paragraphe { color : red ; }
Tous les paragraphes d'identifiant paragraphe auront une couleur d'écriture rouge.
[lang] { color : red ; }
Tous les paragraphes avec l'attribut lang auront une couleur d'écriture rouge.

Types

Quels règles permettent de mettre l'écriture du quatrième paragraphe en rouge ?

<section>
  <p id='paragraphe'>paragraphe 1</p>
  <p>paragraphe 2</p>
  <p class='paragraphe'>paragraphe 3</p>
  <p lang='paragraphe'>paragraphe 4</p>
</section>  

<section>
  <p id='paragraphe'>paragraphe 1</p>
  <p>paragraphe 2</p>
  <p class='paragraphe'>paragraphe 3</p>
  <p lang='paragraphe'>paragraphe 4</p>
</section>

Choix attendu

p { color : red ; }
Tous les paragraphes auront une couleur d'écriture rouge.
[lang~='para'] { color : red ; }
Tous les paragraphes avec l'attribut lang qui contient le mot para auront une couleur d'écriture rouge.
Ici, c'est le mot paragraphe.
[lang^='para'] { color : red ; }
Tous les paragraphes avec l'attribut lang qui commence par les lettres para auront une couleur d'écriture rouge.
[lang*='para'] { color : red ; }
Tous les paragraphes avec l'attribut lang qui contient les lettres para auront une couleur d'écriture rouge.
[lang] { color : red ; }
Tous les paragraphes avec l'attribut lang auront une couleur d'écriture rouge.

Correction Recommencer

Précédent
Suivant

Introduction
Intégration de la mise en forme
Règle CSS
Media Queries
Bootstrap
Sass

Accueil
Module
Outils