Les sélecteurs en CSS - 2ème 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
Voici venu la partie sur les :
- sélecteurs de pseudo-classe ;
- sélecteurs de pseudo-éléments ;
- les sélecteurs multiples ;
- les styles descendants.
Les sélecteurs de pseudo-classe
Les pseudo-classes peuvent être utilisées pour changer le style d'un élément en fonction de son état comme le fait de passer la souris sur cet élément.
On va écrire l'élément HTML puis on place « : » et ensuite, on écrit la pseudo-classe.
selecteur:pseudo-classe{
propriete: valeur;
}
Cela sera plus parlant avec un exemple :
Exemple avec hover
La pseudo-classe « hover » va permettre de changer le style d'un sélecteur lorsque l'on passe la souris sur l'élément.
Reprenons le code de l'article précédent, et modifions le « body ».
<!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>Voici un paragraphe tout simple. Bon, d'accord, c'est un petit paragraphe.</p>
</body>
</html>
Et voici le contenu du fichier « style.css » :
p {
color: blue;
}
p:hover {
color: darkviolet;
}
Grâce à la propriété « color », la première règle attribue une couleur bleue au paragraphe.
La deuxième règle va indiquer que lorsque la souris d'un utilisateur survolera le paragraphe, la couleur du texte de celui-ci deviendra violette. Ne vous inquiétez pas si vous n'avez pas tout compris au sujet du survol du texte, nous y reviendrons dans un autre article. Sachez aussi qu'il existe beaucoup d'autres pseudo-classes.
« hover » change l'état du paragraphe du bleu au violet au survol de la souris, (ou tout autre système de pointage) c'est donc bien une pseudo-classe.
Les sélecteurs de pseudo-éléments
Un pseudo-élément est un mot ajouté à un sélecteur et qui permet de mettre en forme certaines parties de ce sélecteur.
Il va s'écrire en mettant « :: » entre le sélecteur et le pseudo-élément.
selecteur::pseudo-element{
propriete: valeur;
}
Exemple avec « first-letter »
On reprend l'exemple précédent en HTML, mais on change le CSS :
p::first-letter {
color: mediumvioletred;
font-size: 1.7em;
}
Comme vous pouvez le voir en exécutant ce code, une partie seulement du paragraphe a été modifié. Dans notre cas de figure, il s'agit de la première lettre de notre paragraphe qui a une couleur différentes ainsi qu'une taille plus grande.
À savoir
Avant CSS3, on ne faisait pas la distinction entre les pseudo-classes et les pseudo-éléments, et donc, les « :: » du pseudo-élément n'existait pas, c'est la raison pour laquelle les navigateurs ne donneront pas une erreur si vous ne mettez que « : ». Cependant, prenez de bonnes habitudes tout de suite, et mettez bien les « :: » devant un pseudo-élément.
Attention !
Il ne peut pas y avoir deux pseudo-éléments sur le même sélecteur. Ce code n'est pas valide :
/* Ceci n'est pas valide CSS */
selecteur::pseudo-element::pseudo-element {
propriete: valeur
}
Les sélecteurs multiples
On peut avoir plusieurs sélecteurs qui possèdent les mêmes propriétés et dans ce cas, on va pouvoir les mettre sur la même ligne en les séparant par une virgule :
selecteur, selecteur {
propriete: valeur
}
Cela permet de ne pas répéter du code inutilement.
Exemple de sélecteurs multiples
On va modifier le « body » :
<body>
<div class="basic">
<p>Voici un paragraphe tout simple. Bon, d'accord, c'est un petit paragraphe.</p>
</div>
<div class="callout">
<p>Ceci est un paragraphe</p>
</div>
</body>
Le code CSS :
body{
background-color: grey;
}
.callout{
background-color: darkorange;
padding: 20px
}
.callout, .basic {
font-size: 120%;
color: lightgray;
}
Nous avons le « body » qui permet de mettre un fond gris sur l'ensemble de la page, la classe « callout » permet de mettre un fond orange et une marge sur une « div » enrobant un paragraphe, et on va mettre une taille de font et une couleur aux deux « div ».
Les styles descendants
Il arrive assez souvent que l'on veuille un style différent pour un élément descendant d'un autre élément (compris dans un autre élément).
Pour ce faire, on va utiliser un espace entre deux sélecteurs :
selecteur selecteur_descendant {
propriete: valeur
}
Exemple avec h2
Allez on remplace à nouveau le contenu du « body » par :
<body>
<div class="basic">
<h2>Voici un titre classique</h2>
<p>Voici un paragraphe tout simple. Bon, d'accord, c'est un petit paragraphe.</p>
</div>
<div class="callout">
<h2>Il s'agit d'un titre spécial</h2>
<p>Ceci est un paragraphe</p>
</div>
</body>
On ne va pas supprimer le CSS, juste rajouter du code pour obtenir :
body{
background-color: grey;
}
.callout{
background-color: darkorange;
padding: 20px
}
.callout h2{
color: red;
}
.callout, .basic {
font-size: 120%;
color: lightgray;
}
Dans ce cas de figure, on ne veut pas une couleur rouge pour tous les titres en « h2 », seulement pour celui de la classe « callout ».
On va donc indiquer un « h2 » descendant de la classe « callout » avec une couleur rouge.
Ajouter un commentaire :
Publicité
Thèmes abordés:
Publicité
Les commentaires
Il n'y a pas encore de commentaire, mais cela ne serait tarder ...