Les sélecteurs en CSS - 1ère partie
Article écrit par : sandy
Catégorie(s) de cet article : - La conception de site web
Mot(s)-clef(s) de cet article : - CSS
Introduction
Dans l'article sur la syntaxe du CSS, nous avons parlé des sélecteurs. Il en existe de plusieurs types, et comme ils sont un peu nombreux, je vais le faire dans deux articles.
Ici, nous allons traiter :
- Des sélecteurs de balises dits aussi « de type » ;
- Des sélecteurs d'ID ;
- Des sélecteurs de classe ;
- Des sélecteurs d'attributs.
Et dans le prochain article, nous parlerons :
- Des sélecteurs de pseudo-classe ;
- Des sélecteurs de pseudo-élément ;
- Des sélecteurs multiples ;
- Des styles descendants.
Les sélecteurs de balises dit de type
Comme leur nom l'indique, ils sélectionnent toutes les balises, tous les éléments HTML d'un type donné.
Par exemple, si on utilise le sélecteur « p », cela va permettre d'appliquer du CSS sur toutes les balises « <p> » du HTML de votre application.
Exemple avec la balise « body » et la balise « p ».
Si vous ne savez plus comment mettre du CSS sur votre HTML, je vous conseille de revoir les articles précédents sur le CSS, par exemple : lier le CSS au HTML.
Nous allons faire un exemple avec deux fichiers, l'un est « index.html » et l'autre « style.css ».
Le fichier HTML :
<!doctype html>
<html lang="fr">
<!--Ce code est un exemple, il n'y a pas toutes les balises -->
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Un texte avec de la couleur.</p>
<p>Un texte avec la même couleur.</p>
</body>
</html>
Le fichier style.css :
body {
font-size: 25px;
}
p {
color: #101039;
}
Maintenant, il vous suffit de lancer le fichier HTML dans votre explorateur internet. (Firefox, Edge, Brave, Chrome, etc.)
Comme vous pouvez le constater, toutes les balises `<p>` auront un texte de couleur bleu foncé et tout le contenu du « body » aura une taille de 25 px. Ne vous inquiétez pas si vous ne savez pas comment fonctionne les propriétés « font-size » et « color », nous verrons cela dans d'autres articles. Sachez simplement que « font-size » gère la taille du texte, et « color », sa couleur.
Le sélecteur d'ID
Comme vous avez dû le voir dans cet article, Les attributs id et class en HTML, l'élément d'une page qui possède l'ID aura un CSS qui lui sera attribué.
Par exemple, en reprenant le fichier HTML plus haut, mais en remplaçant le « body » par :
<body>
<div id ="container">
<p>Un texte avec de la couleur.</p>
</div>
</body>
Comme vous pouvez le constater, nous mettons un `#` devant le nom de la valeur de l'ID que nous avons indiqué dans le HTML.
Ensuite, vous supprimez le contenu du fichier « style.css » et vous le remplacez par :
#container{
background-color: #a5c8ea;
}
Attention, supprimez bien son contenu avant de copier ce bout de code, sinon, vous n'allez pas obtenir la même chose.
Donc, pour l'ID, on va mettre un dièse.
Mais comme je l'ai déjà indiqué, dans Les attributs id et class, il est maintenant déconseillé d'utiliser l'ID pour le CSS pour le réserver aux liens internes et à JavaScript. Cependant, vous pouvez le faire, il n'y aura pas d'erreur et vous pouvez retrouver cette façon de faire dans d'autres tutoriels ou fichiers source.
Le sélecteur de classe
Vous avez vu l'attribut « class » en HTML, et donc, tous les éléments d'une page qui possèdent une classe peuvent avoir les mêmes propriétés. Pour indiquer une classe en CSS, on va mettre un point avant le sélecteur.
Changeons le contenu de la balise « body » par :
<body> Et dans le fichier css :
<div class="ma-classe">
<p>Mon texte avec <a href="#">un lien</a></p>
</div>
</body>
.ma-classe {
color: #600505;
}
Exécutez le fichier HTML, et vous pourrez vous rendre compte que le texte entre la « div » avec la classe devient de couleur rouge.
Le sélecteur d'attribut
Pour un rappel sur ce que sont les attributs, je vous conseille de lire ou de relire cet article : Les attributs en HTML.
On recommence, on supprime le contenu du body, et on y place :
<button type="button">Cliquez !</button>
<button type="submit">Cliquez !</button>
On supprime aussi le contenu du fichier CSS et on écrit :
button[type="button"] {
background-color: darkred;
color: white;
}
Dans ce cas de figure, nous allons créer un bouton cliquable qui sera de type « bouton » (il existe deux autres types : submit et reset) et qui aura une couleur du fond rouge et un texte écrit en blanc, alors que le bouton de type « submit » n'aura pas de couleur.
Ajouter un commentaire :
Publicité
Thèmes abordés:
Publicité
Les commentaires
Il n'y a pas encore de commentaire, mais cela ne serait tarder ...