Types

Il existe quatre types de sélecteurs :

  • Élément

  • Identifiant

  • Classe

  • Attribut

On peut ajouter le sélecteur universel ( * ) qui représente n'importe quel type (à éviter gourmand en ressource).

DéfinitionElement

Pour mettre en forme les balises en fonction de leur Tag (p, div, span, header, footer, section...), Il suffit de remplacer le sélecteur dans la règle par le Tag concerné.

1
p {
2
  color: green;
3
}
4
div {
5
  background-color: coral;
6
}
1
<div> j'ai un fond coral</div>
2
<p>j'ai un texte vert</p>
3
<div>
4
  <p>j'ai un fond coral et une écriture verte</p>
5
</div>
j'ai un fond coral

j'ai un texte vert

j'ai un fond coral et une écriture verte

Interprétation de CSS

DéfinitionIdentifiant

Les balises HTML peuvent avoir un attribut id qui les identifie. L'identifiant est unique, c'est à dire que deux balises ne peuvent pas avoir le même id.

Pour mettre en forme les balises en fonction de leur id, il suffit de remplacer le sélecteur dans la règle par la valeur de l'identifiant précédé du symbole #.

1
#paragraphe {
2
  color: green;
3
}
4
1
<p id="paragraphe">j'ai un texte vert</p>
2
<p>pas moi</p>



    
j'ai un texte vert


pas moi





Interprétation de CSS
DéfinitionClasse
Les balises HTML peuvent avoir un attribut class qui les identifies. Contrairement à l'identifiant, la valeur de la classe peut être identique pour plusieurs balises.
Pour mettre en forme les balises en fonction de leur classe, Il suffit de remplacer le sélecteur dans la règle par le nom de la classe précédé du symbole ".".
1
.maClasse {
2
  color: green;
3
}
4
1
<p class="maClasse">j'ai un texte vert</p>
2
<p>Pas moi</p>
3
<div class="maClasse">Moi si</div>



    
j'ai un texte vert


Pas moi


Moi si





Interprétation de CSS
DéfinitionAttribut
Historiquement, on pouvait distinguer les balises grâce à leur tag, id et class. Pour améliorer la précision de sélection des balises, le W3C a validé la recherche sur tous les attributs. Pour trouver les balises qui contiennent un attribut particulier, il suffit de remplacer le sélecteur dans la règle par l'attribut encadré des symboles [ ].
1
[lang] {
2
  background-color: gray;
3
  color: green;
4
}
1
<p lang="fr">fond en gris ecriture en bleu</p>
2
<p lang="en">background in gray writing in blue</p>



    
fond en gris ecriture en bleu


background in gray writing in blue





Interprétation de CSS
On peut préciser la valeur
1
[lang="fr"] {
2
  background-color: gray;
3
  color: green;
4
}
1
<p lang="fr">fond en gris ecriture en bleu</p>
2
<p lang="en"><del>background in gray writing in blue</del></p>



   
fond en gris ecriture en bleu



background in gray writing in blue






Interprétation de CSS
Il existe aussi :
[attr~="val"] : val est un des mots séparés par des espaces (class="toto val tata")
[attr^="val"] : commence par val (class = "valeur")
[attr|="val"] : correspond à val ou commence par val- (class="val" ou class="val-toto")
[attr$="val"] : termine par val (class = "carnaval")
[attr*="val"] : contient val (class = "avaler")
On peut combiner les attributs
1
[width="200"][height="200"]