CSS Sélecteurs
CSS (Cascading Style Sheets) fournit une variété de sélecteurs pour sélectionner des éléments HTML auxquels appliquer des styles.
Les sélecteurs CSS sont des motifs utilisés pour sélectionner les éléments que vous souhaitez styliser.
La colonne « CSS » du tableau ci-dessous indique la version CSS dans laquelle la propriété est définie. CSS1, CSS2 et CSS3 sont différentes versions de Cascading Style Sheets, chacune introduisant de nouvelles fonctionnalités et capacités pour améliorer le contrôle et la conception des styles des pages web.
Sélecteurs CSS courants
Voici quelques sélecteurs CSS courants :
Sélecteur d'élément :Sélectionne les éléments HTML par nom d'élément.
Le code suivant,pLe sélecteur sélectionnera tous les<p>Élément :
p {
color: blue;
}
Sélecteur de classe :Sélectionne les éléments HTML avec une classe spécifique par nom de classe.
Les sélecteurs de classe commencent par.commençant par, suivi du nom de classe.
Le code suivant,.highlightLe sélecteur sélectionnera tous les éléments avec la classe« highlight »éléments.
.highlight {
background-color: yellow;
}
Sélecteur d'ID :Sélectionne les éléments HTML par l'identifiant unique (ID) de l'élément.
Les sélecteurs d'ID commencent par#commençant par, suivi du nom de l'ID.
Le code suivant,#exampleLe sélecteur sélectionnera les éléments avec l'ID"example"éléments.
#example {
width: 200px;
}
Sélecteur d'attribut :Sélectionne les éléments HTML par les attributs de l'élément. Les sélecteurs d'attribut peuvent sélectionner en fonction des noms et des valeurs d'attributs.
Le code suivant,input[type="text"]Le sélecteur sélectionnera toustypeLa propriété est"text"l'élément <input>.
input[type="text"] {
border: 1px solid gray;
}Sélecteur descendant :Sélectionne les éléments HTML en spécifiant la relation de descendance des éléments.
Le sélecteur descendant utilise des espaces pour séparer les noms d'éléments.
Dans le code suivant, le sélecteur div p sélectionnera les éléments <p> à l'intérieur des éléments <div>.
div p {
font-weight: bold;
}Pour plus de sélecteurs, consultez le tableau suivant :
| Sélecteurs | Exemple | Explication de l'exemple | CSS |
|---|---|---|---|
| .classe | .intro | Sélectionne tous les éléments avec class="intro" | 1 |
| #id | #firstname | Sélectionne tous les éléments avec id="firstname" | 1 |
| * | * | Sélectionne tous les éléments | 2 |
| élément | p | Sélectionne tous les éléments <p> | 1 |
| element,element | div,p | Sélectionne tous les éléments <div> et <p> | 1 |
| element.class | p.hometown | Sélectionne tous les éléments <p> avec class="hometown" | 1 |
| element element | div p | Sélectionne tous les éléments <p> à l'intérieur des éléments <div> | 1 |
| element>element | div>p | Sélectionne tous les éléments <p> dont le parent est un élément <div> | 2 |
| element+element | div+p | Sélectionne le premier élément <p> suivant immédiatement un élément <div> | 2 |
| [attribut] | [target] | Sélectionne tous les éléments avec un attribut target | 2 |
| [attribute=value] | [target=-blank] | Sélectionne tous les éléments utilisant target="-blank" | 2 |
| [attribute~=value] | [title~=flower] | Sélectionne tous les éléments dont l'attribut title contient le mot "flower" | 2 |
| [attribute|=language] | [lang|=en] | Sélectionne les éléments dont l'attribut lang est égal àen, ou avecen-tous les éléments commençant par | 2 |
| :link | a:link | Sélectionne tous les liens non visités | 1 |
| :visited | a:visited | Sélectionne tous les liens visités | 1 |
| :active | a:active | Sélectionne les liens actifs | 1 |
| :hover | a:hover | Sélectionne lorsqu'un lien est survolé par la souris | 1 |
| :focus | input:focus | Sélectionne les éléments input qui ont le focus | 2 |
| :first-letter | p:first-letter | Sélectionne la première lettre de chaque élément <p> | 1 |
| :first-line | p:first-line | Sélectionne la première ligne de chaque élément <p> | 1 |
| :first-child | p:first-child | Spécifie le style uniquement lorsqu'un élément <p> est le premier enfant de son parent. | 2 |
| :before | p:before | Insère du contenu avant chaque élément <p> | 2 |
| :after | p:after | Insère du contenu après chaque élément <p> | 2 |
| :lang(language) | p:lang(it) | Sélectionne tous les éléments <p> dont l'attribut lang a une valeur commençant par "it" | 2 |
| element1~element2 | p~ul | Sélectionne chaque élément <ul> qui suit un élément <p> | 3 |
| [attribute^=value] | a[src^="https"] | Sélectionne chaque élément dont la valeur de l'attribut src commence par "https" | 3 |
| [attribute$=value] | a[src$=".pdf"] | Sélectionne chaque élément dont la valeur de l'attribut src se termine par ".pdf" | 3 |
| [attribute*=value] | a[src*="example"] | Sélectionne chaque élément dont la valeur de l'attribut src contient la sous-chaîne "example" | 3 |
| :first-of-type | p:first-of-type | Sélectionne chaque élément <p> qui est le premier élément <p> de son parent | 3 |
| :last-of-type | p:last-of-type | Sélectionne chaque élément <p> qui est le dernier élément <p> de son parent | 3 |
| :only-of-type | p:only-of-type | Sélectionne chaque élément <p> qui est le seul élément <p> de son parent | 3 |
| :only-child | p:only-child | Sélectionne chaque élément <p> qui est l'unique enfant de son parent | 3 |
| :nth-child(n) | p:nth-child(2) | Sélectionne chaque élément <p> qui est le deuxième enfant de son parent | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | Sélectionne chaque élément <p> qui est le deuxième enfant de son parent, en comptant à partir du dernier enfant | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Sélectionne chaque élément <p> qui est le deuxième élément <p> de son parent | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Sélectionne chaque élément <p> qui est le deuxième élément <p> de son parent, en comptant à partir du dernier enfant | 3 |
| :last-child | p:last-child | Sélectionne chaque élément <p> qui est le dernier enfant de son parent. | 3 |
| :root | :root | Sélectionne l'élément racine du document | 3 |
| :empty | p:empty | Sélectionne chaque élément <p> qui n'a aucun enfant (y compris les nœuds de texte) | 3 |
| :target | #news:target | Sélectionne l'élément #news actuellement actif (l'URL cliquée contenant ce nom d'ancre) | 3 |
| :enabled | input:enabled | Sélectionne chaque élément input activé | 3 |
| :disabled | input:disabled | Sélectionne chaque élément input désactivé | 3 |
| :checked | input:checked | Sélectionne chaque élément input coché | 3 |
| :not(selector) | :not(p) | Sélectionne chaque élément qui n'est pas un élément <p> | 3 |
| ::selection | ::selection | Correspond à la partie d'un élément qui est sélectionnée ou mise en surbrillance par l'utilisateur | 3 |
| :out-of-range | :out-of-range | Correspond aux éléments input dont la valeur est en dehors de la plage spécifiée | 3 |
| :in-range | :in-range | Correspond aux éléments input dont la valeur se trouve dans la plage spécifiée | 3 |
| :read-write | :read-write | Utilisé pour correspondre aux éléments lisibles et modifiables | 3 |
| :read-only | :read-only | Utilisé pour correspondre aux éléments ayant l'attribut "readonly" défini | 3 |
| :optional | :optional | Utilisé pour correspondre aux éléments input facultatifs | 3 |
| :required | :required | Utilisé pour correspondre aux éléments ayant l'attribut "required" défini | 3 |
| :valid | :valid | Sert à faire correspondre les éléments dont les valeurs de saisie sont valides | 3 |
| :invalid | :invalid | Sert à faire correspondre les éléments dont les valeurs de saisie sont non valides | 3 |
| :has | :has | Permet de sélectionner un élément en fonction de ses éléments descendants. | 3 |
| :is | :is | Accepte n'importe quel nombre de sélecteurs comme paramètres et renvoie l'union des éléments correspondant à ces sélecteurs. | 3 |