CSS (Cascading Style Sheets)
Page 10: Pseudo-classes et pseudo-élements
Toutes les pages 
CSS (Cascading Style Sheets)
Page 10
Pseudo-classes et pseudo-élements
Pseudo-classes et pseudo-élements
Pseudo-classes
Une pseudo-classe est un mot clé préfixé par deux points (:) qui s'ajoute à un sélecteur CSS pour appliquer un style à un élément dans un cas particulier. L'utilisation des pseudo-classes est très populaire sur les liens hypertextes qui changent de décor selon si ils sont nouvellement affichés, déjà visités ou survolés... Or, leur utilisation s'étend aux autres objets HTML tel que les images, les conteneurs, les listes...Voici la liste des pseudo-classes les plus utilisées en CSS:
Pseudo-classe :link
La pseudo-classe :link désigne un lien hypertexte dont la page cible (celle spécifiée dans son attribut href) n'a pas encore été visitée. Elle peut aider les internautes à distinguer les liens qu'ils n'ont pas encore exploré.Pseudo-classe :visited
A l'inverse de link, la pseudo-classe :visited désigne un lien hypertexte dont la page cible a déjà été visitée. C'est un genre d'historique en quelque sorte.Pseudo-classe :active
La pseudo-classe :active désigne un lien hypertexte sélectionné. Il s'agit de l'instant où le visiteur clique sur le lien, si celui-ci reste affiché sur la page (cas où la page est figée après le clic, ou le lien est ouvert dans une nouvelle fenêtre) on peut voir l'effet de cette pseudo-classe.Pseudo-classe :hover
La pseudo-classe :hover désigne un objet survolé par le curseur de la souris, il peut être un hyperlien ou n'importe quel autre objet.Exemple:
Code HTML:
<a href="#">Hyperlien</a>
Code CSS:
a{
font-weight:bold;
color:#EE6600;
text-decoration:none;
}
a:hover{
color:#000088;
text-decoration:underline;
}
Le résultat serait:
font-weight:bold;
color:#EE6600;
text-decoration:none;
}
a:hover{
color:#000088;
text-decoration:underline;
}
Dans cet exemple, nous avons spécifié un style qui s'applique à tous les liens quelque soit leur état (sélecteur a). Après nous avons explicité le style de l'état survolé (a:hover). Il faut savoir que tous les styles déjà déclarés dans le premier sélecteur sont hérités par le sélecteur de l'état survolé, et ceux qui ont été redéfinis seront écrasés et remplacés par leur nouvelle valeur (cas des propriétés color et text-decoration).
Appliquons maintenant cette pseudo-classe à une image:
Code HTML:
<img src="images/footerlogo.png" id="logo" />
Code CSS:
#logo{
opacity:1;
filter:alpha(opacity=100);
cursor:pointer;
}
#logo:hover{
opacity:0.5;
filter:alpha(opacity=50);
}
Le résultat serait:
opacity:1;
filter:alpha(opacity=100);
cursor:pointer;
}
#logo:hover{
opacity:0.5;
filter:alpha(opacity=50);
}
Pseudo-classe :focus
La pseudo-classe :focus désigne un élément activé ou sélectionné suite à un clic ou une tabulation. C'est souvent utilisé sur les champs de formulaire.Exemple:
Code HTML:
<input type="text" name="login" />
Code CSS:
input[type="text"]{
border:solid 1px #CCCCCC;
color:#888888;
padding:10px;
border-radius:4px;
}
input[type="text"]:focus{
border:solid 1px #EE6600;
color:#888888;
outline:none;
}
Ce qui donne le résultat:
border:solid 1px #CCCCCC;
color:#888888;
padding:10px;
border-radius:4px;
}
input[type="text"]:focus{
border:solid 1px #EE6600;
color:#888888;
outline:none;
}
Là encore vous avez remarqué la propriété outline à laquelle on a donné la valeur none. Elle désigne un cadre qui ressemble à la bordure mais qui entoure l'objet (sa bordure comprise). Certains navigateur (comme Google Chrome) appliquent automatiquement ce cadre aux champs de formulaires sélectionnés, ce qui peut altérer un peu le design souhaité. La valeur none élimine tout cadre éventuel.
La propriété outline a les mêmes valeurs que la propriété border.
Pseudo-classe :first-child
La pseudo-classe first-child désigne le premier élément enfant. Supposons que nous avons déclaré le sélecteur suivant span:first-child. Le navigateur appliquera le style associé à toutes les balises <span> qui figurent en tant que premier élément enfant de n'importe quelle balise. Si le code HTML était comme ceci:<div>
<span>Bonjour</span>
Ã
<span>tous</span>
</div>
Alors seule la premier balise <span> s'attribuerait le style décrit dans le sélecteur.
<span>Bonjour</span>
Ã
<span>tous</span>
</div>
Pseudo-classe :nth-child(n)
Si la pseudo-classe first-child permet d'accéder au premier élément enfant d'un parent quelconque, la pseudo-classe nth-child(n) quant à elle, permet d'accéder à un élément enfant de n'importe quel rang et pas que le premier. Le paramètre n mis entre les parenthèse désigne le rand de l'élément à styler. Il s'agit d'un indice numérique qui commence de 1 (1 étant le premier élément, 2 le deuxième et ainsi de suite...).Pour l'exemple HTML précédent, le sélecteur div>span:nth-child(2) fait référence à la deuxième balise <span>.
Pseudo-éléments
Tout comme les pseudo-classes, les pseudo-éléments sont préfixés par deux points (:) et ajoutés au sélecteur. Si les pseudo-classe décrivent un état d'un élément (comme un lien hypertexte survolé), les pseudo-éléments eux accèdent à certaines parties de l'élément pour les styler.Bon, si vous êtes débutant, vous aurez peut être du mal à soulever la petite nuance qui sépare les deux pseudo-trucs. Mais avec la pratique ça sera de plus en plus claire.
Notez qu'en CSS3 on préfixe les pseudo-éléments par double deux point (::) ou lieu de deux points (:), mais les navigateurs continuent quand même à reconnaître les pseudo-élément même s'il commencent par deux points.
Voyons maintenant les pseudo-éléments les plus fréquents:
Pseudo-élement ::first-letter
Le pseudo-élément ::first-letter désigne la première lettre de l'élément auquel il est associé. Il permet de donner un style particulier à la première lettre d'un élément.Exemple:
Code HTML:
<div>
La première lettre de ce texte est différente!
</div>
Code CSS:
La première lettre de ce texte est différente!
</div>
div::first-letter{
font-size:24pt;
color:orange;
}
Ce qui donne:
font-size:24pt;
color:orange;
}
La première lettre de ce texte est différente!
C'est pratique non? En fait, sans pseudo-élément on aurait du mettre la lettre L dans la balise <span> qu'on stylera par la suite à notre guise, mais ça fait plus de travail!
Pseudo-élement ::first-line
Le pseudo-élément ::first-line désigne la première ligne de l'élément. On peut lui donner un style particulier tout comme pour first-letter. Le contenu de la première ligne peut changer selon la largeur de la fenêtre du navigateur.Exemple:
Code HTML:
<p class="paragraphe">
Tout comme les pseudo-classes, les pseudo-éléments sont préfixés par deux points (:) et ajoutés au sélecteur. Si les pseudo-classe décrivent un état d'un élément (comme un lien hypertexte survolé), les pseudo-éléments eux accèdent à certaines parties de l'élément pour les styler.
</p>
Code CSS:
Tout comme les pseudo-classes, les pseudo-éléments sont préfixés par deux points (:) et ajoutés au sélecteur. Si les pseudo-classe décrivent un état d'un élément (comme un lien hypertexte survolé), les pseudo-éléments eux accèdent à certaines parties de l'élément pour les styler.
</p>
.paragraphe::first-line{
color:blue;
}
Ce qui donne:
color:blue;
}
Tout comme les pseudo-classes, les pseudo-éléments sont préfixés par deux points (:) et ajoutés au sélecteur. Si les pseudo-classe décrivent un état d'un élément (comme un lien hypertexte survolé), les pseudo-éléments eux accèdent à certaines parties de l'élément pour les styler.
Pseudo-élements ::before et ::after
::before permet de créer un pseudo-élément au début de l'élément sur lequel il est déclaré. Oui, j'ai bien dit "créer". Désormais on peut intégrer du texte à un élément grâce au CSS, mais il ne faut recourir à cette pratique tout le temps, car n'oubliez pas que c'est HTML qui devrait créer le contenu et le CSS ne fait que le styler.::after crée un pseudo-élément à la fin de l'élément sur lequel il est déclaré.
Les pseudo-éléments ::before et ::after font appel à la propriété content qui ajoute du contenu (par défaut de type inline).
Pour mieux comprendre comment ça fonctionne faisons un exemple:
Code HTML:
<div>
Contenu de la DIV
</div>
Code CSS:
Contenu de la DIV
</div>
div::before{
content:"Avant";
color:red;
}
div::after{
content:"Après";
color:blue;
}
Ce qui donne le résultat:
content:"Avant";
color:red;
}
div::after{
content:"Après";
color:blue;
}
Avant Contenu de la DIV Après
Sachez qu'il existe bien des dizaines de pseudo-classes et pseudo-éléments qui offrent beaucoup plus de possibilités. Mais j'ai essayé de vous montrer les plus utiles et les plus fréquents.
