« Le langage CSS/Les sélecteurs » : différence entre les versions
Contenu supprimé Contenu ajouté
→Les sélecteurs d'enfant et de frère adjacent : - paragraphe d'antan. |
|||
Ligne 313 :
* La pseudo-classes '':hover'' peut ne pas correspondre à une interaction possible de l'utilisateur, par exemple lorsque le périphérique de saisie est un stylo.
===
La pseudo-classe <code>:first-child</code> désigne le premier enfant d'un élément, c'est-à-dire le premier élément inclus dedans
On peut l'utiliser pour modifier le premier paragraphe d'une page ou encore la première entrée d'une liste.
Exemple :
<syntaxhighlight lang="css">
.document :first-child {
/* Styles pour le premier élément enfant d'un autre de classe "document" */
}
.document p:first-child {
/*
Styles pour le premier élément enfant d'un autre de classe "document", s'il s'agit d'un élément p
<div class="document">
<span></span> <!-- Ne s'applique pas à cet élément (n'est pas un <p>) -->
<p></p> <!-- Ne s'applique pas à cet élément (n'est pas premier) -->
*/
}
</syntaxhighlight>
La pseudo-classe <code>:first-of-type</code> désigne le premier enfant d'un élément ayant le type d'élément spécifié.
Notez la différence avec l'exemple précédent :
<syntaxhighlight lang="css">
.document p:first-of-type {
/*
Styles pour le premier élément <p> enfant d'un autre de classe "document"
<div class="document">
<span></span>
<p></p> <!-- S'applique à cet élément -->
*/
}
</syntaxhighlight>
=== Autres pseudo-classes ===
La pseudo-classe <code>:lang</code> permet de sélectionner des éléments correspondant à certaines langues. Il faut pour cela que les éléments concernés ou un de leur parent ai(en)t une langue spécifiée, ou encore que la page comporte une mention de langue dans l'entête. Cette pseudo-classe est d'une utilisation extrêmement marginale. Citons tout de même la possibilité de changer le caractère des guillemets utilisés pour les citations dans la balise HTML <code><q>…</q></code>. Nous utilisons en effet « et » en français alors que les anglo-saxons utilisent plutôt “ et ”.
| |||