Podcast CSS – 002: Sélecteurs
Si vous avez du texte que vous voulez seulement être plus grand et rouge s'il s'agit du premier paragraphe d'un article, comment faire ?
<article>
<p>I want to be red and larger than the other text.</p>
<p>I want to be normal sized and the default color.</p>
</article>
Vous utilisez un sélecteur CSS pour trouver cet élément spécifique et appliquer une règle CSS, comme celle-ci.
article p:first-of-type {
color: red;
font-size: 1.5em;
}
Le CSS offre de nombreuses options pour sélectionner des éléments et leur appliquer des règles, allant de très simple à très complexe, pour aider à résoudre ce genre de situations.
Composantes d'une règle CSS
Pour comprendre le fonctionnement des sélecteurs et leur rôle dans le CSS, il est important de connaître les parties d'une règle CSS. Une règle CSS est un bloc de code, contenant un ou plusieurs sélecteurs et une ou plusieurs déclarations.
Dans cette règle CSS, le sélecteur est .my-css-rule
.
qui recherche tous les éléments avec une classe de my-css-rule
sur la page.
Il y a trois déclarations entre les accolades.
Une déclaration est une paire propriété-valeur qui applique des styles aux éléments correspondant aux sélecteurs.
Une règle CSS peut comporter autant de déclarations et de sélecteurs que vous le souhaitez.
Sélecteurs simples
Le groupe le plus simple de sélecteurs cible les éléments HTML plus classes, identifiants et autres attributs pouvant être ajoutés à une balise HTML.
Sélecteur universel
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Un sélecteur universel, également appelé "caractère générique", correspond à n'importe quel élément.
* {
color: hotpink;
}
Avec cette règle, chaque élément HTML de la page affiche du texte en rose.
Sélecteur de type
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Un sélecteur de type correspond directement à un élément HTML.
section {
padding: 2em;
}
Avec cette règle, chaque élément <section>
présente une valeur 2em
de padding
de tous les côtés.
Sélecteur de classe
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Un ou plusieurs éléments peuvent être définis dans l'attribut class
d'un élément HTML.
La
Sélecteur de classe
correspond à tout élément auquel cette classe est appliquée.
<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>
Tout élément auquel la classe est appliquée s'affiche en rouge:
.my-class {
color: red;
}
Notez que .
n'est présent que dans le code CSS, et non dans le code HTML.
En effet, le caractère .
indique au langage CSS de faire correspondre les membres de l'attribut de classe.
Il s'agit d'un modèle courant en CSS, où un caractère spécial,
ou un ensemble de caractères, est utilisé pour définir les types de sélecteur.
Un élément HTML ayant une classe de .my-class
sera quand même mis en correspondance avec la règle CSS ci-dessus,
même s'ils ont plusieurs autres classes, comme celle-ci:
<div class="my-class another-class some-other-class"></div>
En effet, le CSS recherche un attribut class
qui contient la classe définie,
au lieu de correspondre exactement à cette classe.
Sélecteur d'ID
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Seul un élément HTML doté d'un attribut id
doit être associé à cet ID sur une page.
Vous sélectionnez des éléments avec
Sélecteur d'ID comme suit:
#rad {
border: 1px solid blue;
}
Ce CSS applique une bordure bleue à l'élément HTML dont le id
est rad
, comme suit:
<div id="rad"></div>
Comme pour le sélecteur de classe .
,
Utilisez un caractère #
pour indiquer au CSS de rechercher un élément qui correspond à la id
qui le suit.
Sélecteur d'attributs
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Vous pouvez rechercher des éléments
qui ont un certain attribut HTML,
ou une valeur pour un attribut HTML,
à l'aide du sélecteur d'attributs.
Indiquez au CSS de rechercher des attributs en entourant le sélecteur de crochets ([ ]
).
[data-type='primary'] {
color: red;
}
Ce CSS recherche tous les éléments dont l'attribut est data-type
et dont la valeur est primary
, comme ceci:
<div data-type="primary"></div>
Au lieu de rechercher une valeur spécifique de data-type
,
vous pouvez également rechercher des éléments comportant l'attribut, quelle que soit sa valeur.
[data-type] {
color: red;
}
<div data-type="primary"></div>
<div data-type="secondary"></div>
Ces deux éléments <div>
seront accompagnés de texte en rouge.
Vous pouvez utiliser des sélecteurs d'attributs sensibles à la casse.
en ajoutant un opérateur s
au sélecteur d'attributs.
[data-type='primary' s] {
color: red;
}
Cela signifie que si un élément HTML avait une data-type
de Primary
,
au lieu de primary
, le texte en rouge ne s'affiche pas.
Vous pouvez faire le contraire (insensibilité à la casse) en utilisant un opérateur i
.
En plus des opérateurs de cas, vous avez accès aux opérateurs qui correspondent à des parties de chaînes dans les valeurs d'attribut.
/* A href that contains "example.com" */
[href*='example.com'] {
color: red;
}
/* A href that starts with https */
[href^='https'] {
color: green;
}
/* A href that ends with .com */
[href$='.com'] {
color: blue;
}
Sélecteurs de regroupement
Un sélecteur ne doit pas nécessairement correspondre à un seul élément. Vous pouvez regrouper plusieurs sélecteurs en les séparant par des virgules:
strong,
em,
.my-class,
[lang] {
color: red;
}
Cet exemple étend le changement de couleur aux éléments <strong>
et <em>
.
Elle est également étendue à une classe nommée .my-class
et à un élément qui possède un attribut lang
.
Testez vos connaissances
Tester vos connaissances sur les sélecteurs simples
* {}
Quel type de sélecteur simple est utilisé dans l'extrait ci-dessus ?
div {}
Quel type de sélecteur simple est utilisé dans l'extrait ci-dessus ?
Pseudo-classes et pseudo-éléments
Le CSS fournit des types de sélecteur utiles qui se concentrent sur un état spécifique de la plate-forme. Par exemple, lorsque l'utilisateur pointe sur un élément, structure à l'intérieur ou certaines parties d'un élément.
Pseudo-cours
Les éléments HTML se trouvent dans différents états, soit parce qu'ils font l'objet d'interactions, ou si l'un de leurs éléments enfants est dans un certain état.
Par exemple, un utilisateur peut survoler un élément HTML avec le pointeur de la souris
ou l'utilisateur peut pointer sur un élément enfant.
Dans ce cas, utilisez la pseudo-classe :hover
.
/* Our link is hovered */
a:hover {
outline: 1px dotted green;
}
/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
background: floralwhite;
}
Pour en savoir plus, consultez le module de pseudo-cours.
Pseudo-élément
Les pseudo-éléments diffèrent des pseudo-classes car au lieu de répondre à l'état de la plate-forme,
ils agissent comme s'ils insèrent
un nouvel élément avec CSS.
Les pseudo-éléments sont également syntaxiquement
différents des pseudo-classes,
En effet, au lieu d'utiliser un seul deux-points (:
), nous utilisons un double deux-points (::
).
.my-element::before {
content: 'Prefix - ';
}
Comme dans la démonstration ci-dessus, où vous avez préfixé le libellé d'un lien avec le type de fichier dont il s'agit,
Vous pouvez utiliser le pseudo-élément ::before
pour insérer du contenu au début d'un élément.
ou le pseudo-élément ::after
pour insérer du contenu à la fin d'un élément.
Les pseudo-éléments ne se limitent toutefois pas à l'insertion de contenu.
Vous pouvez également les utiliser pour cibler des parties spécifiques d'un élément.
Par exemple, supposons que vous ayez une liste.
Utilisez ::marker
pour appliquer un style à chaque puce (ou numéro) de la liste
/* Your list will now either have red dots, or red numbers */
li::marker {
color: red;
}
Vous pouvez également utiliser ::selection
pour appliquer un style au contenu mis en évidence par un utilisateur.
::selection {
background: black;
color: white;
}
Pour en savoir plus, consultez le module sur les pseudo-éléments.
Testez vos connaissances
Tester vos connaissances sur les pseudo-sélecteurs
Combien de deux-points les sélecteurs de pseudo-éléments utilisent-ils ?
p:hover { background: white; color: black; }
Quel type de pseudo-sélecteur est utilisé dans l'extrait ci-dessus ?
Sélecteurs complexes
Vous avez déjà vu un large éventail de sélecteurs, mais parfois, vous aurez besoin d'un contrôle plus précis avec votre CSS. C'est là que des sélecteurs complexes entrent en jeu.
Il convient de se rappeler à ce stade que, bien que les sélecteurs suivants nous donnent plus de puissance, nous ne pouvons que basculer vers le bas, en sélectionnant des éléments enfants. Impossible de cibler vers le haut et de sélectionner un élément parent. Nous verrons ce qu'est la cascade et son fonctionnement. dans une prochaine leçon.
Combinateurs
Un combinateur est ce qui se trouve entre deux sélecteurs.
Par exemple, si le sélecteur était p > strong
, le combinateur est le caractère >
.
Les sélecteurs qui utilisent ces combinateurs vous aident à sélectionner des éléments en fonction de leur position dans le document.
Combinateur descendant
Pour comprendre les combinateurs de descendants, vous devez d'abord comprendre les éléments parents et enfants.
<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>
L'élément parent est <p>
, qui contient du texte.
Cet élément <p>
contient un élément <strong>
, ce qui met son contenu en gras.
Comme il se trouve à l'intérieur de <p>
, il s'agit d'un élément enfant.
Un combinateur descendant permet de cibler un élément enfant.
Un espace () est utilisé pour indiquer au navigateur de rechercher des éléments enfants:
p strong {
color: blue;
}
Cet extrait sélectionne tous les éléments <strong>
qui sont des éléments enfants des éléments <p>
uniquement, ce qui les rend bleus de manière récursive.
Cet effet est mieux
visualisé dans l'exemple ci-dessus,
à l'aide du sélecteur de combinaison .top div
.
Cette règle CSS ajoute une marge intérieure gauche à ces éléments <div>
.
Comme le combinateur est récursif,
cette même marge intérieure sera appliquée à tous les éléments <div>
qui se trouvent dans .top
.
Examinons le panneau HTML dans cette démonstration
pour voir comment l'élément .top
a plusieurs éléments enfants <div>
qui, eux-mêmes,
comporte <div>
éléments enfants.
Combinateur frère suivant
Vous pouvez rechercher un élément qui suit immédiatement un autre élément
en utilisant le caractère +
dans votre sélecteur.
Pour ajouter de l'espace
entre des éléments empilés,
utiliser le combinateur frère suivant pour ajouter de l'espace
uniquement si un élément est le sœur suivant d'un élément enfant de .top
.
Vous pouvez ajouter une marge à tous les éléments enfants de .top
,
à l'aide du sélecteur suivant:
.top * {
margin-top: 1em;
}
Le problème est que, comme vous sélectionnez tous les éléments enfants de .top
,
cette règle peut créer
de l'espace supplémentaire inutile.
Le combinateur frère suivant,
Associé à un sélecteur universel, vous pouvez non seulement contrôler quels éléments obtiennent de l'espace,
mais aussi appliquer de l'espace à n'importe quel élément.
Vous bénéficiez ainsi d'une certaine flexibilité sur le long terme,
quels que soient les éléments HTML qui apparaissent dans .top
.
Combinateur de frères et sœurs suivant
Un combinateur suivant est très semblable à un sélecteur de sœur suivant.
Cependant, au lieu d'un caractère +
,
utilisez un caractère ~
.
La différence réside dans le fait qu'un élément doit simplement suivre un autre élément ayant le même parent,
au lieu d'être l'élément suivant avec le même parent.
Le combinateur suivant
apporte un peu moins de rigidité,
ce qui est utile dans des contextes
comme l'exemple ci-dessus,
Ici, nous changeons la couleur d'un commutateur personnalisé lorsque la case à cocher qui lui est associée a l'état :checked
.
Combinateur enfant
Un combinateur enfant (également appelé descendant direct)
vous permet de mieux contrôler la récursion fournie avec les sélecteurs de combinateur.
En utilisant le caractère >
, vous limitez le sélecteur de combinateur à appliquer uniquement aux enfants directs.
Prenons l'exemple précédent de sélecteur de frères et sœurs. L'espace est ajouté à chaque sœur suivant, Toutefois, si l'un de ces éléments a également des éléments frères suivants en tant qu'enfants, cela peut entraîner un espacement supplémentaire indésirable.
Pour atténuer
ce problème,
modifiez le sélecteur de frère suivant pour intégrer un combinateur enfant: > * + *
.
La règle s'appliquera désormais uniquement aux enfants directs de .top
.
Sélecteurs composés
Vous pouvez combiner des sélecteurs pour améliorer la spécificité et la lisibilité.
Par exemple, pour cibler les éléments <a>
,
possédant également une classe .my-class
, écrivez ce qui suit:
a.my-class {
color: red;
}
Le rouge n'est pas appliqué à tous les liens
De plus, la couleur rouge n'est appliquée à .my-class
que si la couleur rouge est appliquée à un élément <a>
.
Pour en savoir plus à ce sujet, consultez le module de spécificité.
Testez vos connaissances
Tester vos connaissances sur les sélecteurs complexes
Lequel des symboles suivants n'est pas un combinateur de sélecteurs ?
section.awesome { border: 1px solid hotpink; }
Le sélecteur ci-dessus est un exemple de...