Les sélecteurs CSS permettent de sélectionner et de manipuler des éléments HTML en fonction de leur id, classe, type, attribut...
---
Le sélecteur de balise sélectionne des éléments sur la base du nom de la balise.
Vous pouvez par exemple affecter tous les éléments de balise <p> et <h1> sur une page.
Exemple :
p {
font-family:Verdana ;
color:red ;
text-align:center ;
line-height: 30px ;
}
h1 {
color:green ;
text-align:right ;
font-size:40px ;
}
Voir
---
Le sélecteur d'identifiant utilise l'attribut id d'un élément HTML pour sélectionner un élément spécifique de la page.
Un id doit être unique dans une page, de sorte que le sélecteur d'identifiant soit utilisé sur un élément unique.
Pour sélectionner un élément avec un id spécifique, vous devez utiliser le caractère dièse suivi par l'id de l'élément.
#pub {
background-color:yellow ;
color:red ;
font-size:14px ;
font-style:italic ;
}
Voir
---
Le sélecteur de classe sélectionne des éléments avec un attribut de classe spécifique.
Pour sélectionner des éléments avec une classe spécifique, le sélecteur de classe s'écrit par un point suivi du nom de la classe:
.centreRouge {
text-align:center;
color:red;
}
.grandGras {
font-size:20px;
font-weight:blod;
}
Il est donc possible d'appliquer la classe "centreRouge" à n'importe quelle balise
<!DOCTYPE html>
<html>
<head>
<style>
.centreRouge {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="centreRouge">Titre centré et rouge</h1>
<h1>Aucune classe appliquée sur cet élément</h1>
<p class="centreRouge">Paragraphe centré et rouge.</p>
<p>Aucune classe appliquée sur cet élément</p>
</body>
</html>
Voir
Remarque:
Dans l'exemple ci-dessous, tous les éléments <p> de classe "centrerouge" seront rouges et alignés au centre:
p.centrerouge {
text-align:center;
color:red;
}
Dans l'exemple ci-dessous, la classe "centrerouge" appliquée à la balise h1 n'a aucun effet car elle s'applique uniquement sur les balises <p>
<!DOCTYPE html>
<html>
<head>
<style>
p.centrerouge {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="centrerouge">Titre centré et pas rouge</h1>
<h1>Aucune classe appliquée sur cet élément</h1>
<p class="centrerouge">Paragraphe centré et rouge.</p>
<p>Aucune classe appliquée sur cet élément</p>
</body>
</html>
Voir
Remarque :
<!DOCTYPE html>
<html>
<head>
<style>
.sommaire {
color:red;
}
.titre {
text-align: center;
font-size:20px;
}
</style>
</head>
<body>
<p>Paragraphe sans style particulier</p>
<p class="sommaire">Paragraphe de classe sommaire</p>
<p class="titre">Paragraphe de classe titre</p>
<p class="sommaire titre">Paragraphe de classe sommaire et titre</p>
</body>
</html>
Voir