Nous avons déjà vu les sélecteurs de type, les sélecteurs de classe et sélecteurs d'id. Ceux-ci constituent la base de l'application d'un style CSS. Néanmoins, il existe d'autres types de sélecteurs. Ici, la liste de tous les selecteurs CSS.
Pseudos-classes
Les pseudos classes sont des sélecteurs qui permettent de sélectionner un élément dans un état spécifique, à l'image du sélécteur :hover qui permet de sélectionner un élément survolé par l’utilisateur. Contrairement aux classes et id qui peuvent s'appliquer à l'ensemble des éléments présents dans le body, les pseudos-classes, comme certains types d'attributs (href, src) peuvent être spécifiques à certains types d’éléments. Ici, la liste de toutes les pseudo-classes.
:nth-child
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
:nth-child est une pseudo-classe très puissante, qui permet de sélectionner des éléments en se basant sur leur index dans la liste des enfants d'après leurs parents. On peut sélectionner des indexs uniques comme dans l’exemple ci-dessous :
<div class="greetings">
<p>Greetings can be different.</p>
<p>They depend on languages, like:</p>
<ul>
<li>Bonjour</li>
<li>Good morning</li>
<li>Buenos Dias</li>
<li>Guten Tag</li>
<li>Buongiorno</li>
<li>God Morgen</li>
<li>Bom dia</li>
</ul>
<p>Many others exist as well.</p>
</div>/* Sélectionne tous éléments de type li avec l'index 1 à l’intérieur de .greetings */
.greetings li:nth-child(1){
color: blue;
}Ou sélectionner des mutiples de nombres, avec notemment les mots-clés odd et even :
<div class="greetings">
<p>Greetings can be different.</p>
<p>They depend on languages, like:</p>
<ul>
<li>Bonjour</li>
<li>Good morning</li>
<li>Buenos Dias</li>
<li>Guten Tag</li>
<li>Buongiorno</li>
<li>God Morgen</li>
<li>Bom dia</li>
</ul>
<p>Many others exist as well.</p>
</div>/* Sélectionne tous les éléments de type li impairs à l’intérieur de .greetings */
.greetings li:nth-child(odd){
color: blue;
}
/* Sélectionne tous les éléments de type li pairs à l’intérieur de .greetings */
.greetings li:nth-child(even){
color: red;
}Il est également possible de sélectionner des multiples d’autre nombre, grâce à la notation en fonction :
<div class="greetings">
<p>Greetings can be different.</p>
<p>They depend on languages, like:</p>
<ul>
<li>Bonjour</li>
<li>Good morning</li>
<li>Buenos Dias</li>
<li>Guten Tag</li>
<li>Buongiorno</li>
<li>God Morgen</li>
<li>Bom dia</li>
</ul>
<p>Many others exist as well.</p>
</div>/* Sélectionne tous les éléments de type li multiples de 3 à l’intérieur de .greetings */
.greetings li:nth-child(3n){
color: blue;
}
/* Sélectionne tous les éléments de type li multiples de 3 - 2 à l’intérieur de .greetings */
.greetings li:nth-child(3n - 2){
color: red;
}
/* Sélectionne tous les éléments de type li multiples de 3 - 1 à l’intérieur de .greetings */
.greetings li:nth-child(3n - 1){
color: green;
}:first-child et :last-child
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
Les sélecteurs servent :first-child et last-child à sélectionner le premier ou le dernier élément enfant de chaque parent. Le sélecteur :last-child est particulièrement utile pour sélectionner le dernier élément d'une série dont on ne connait pas la longueur.
<div class="greetings">
<p>Greetings can be different.</p>
<p>They depend on languages, like:</p>
<ul>
<li>Bonjour</li>
<li>Good morning</li>
<li>Buenos Dias</li>
<li>Guten Tag</li>
<li>Buongiorno</li>
<li>God Morgen</li>
<li>Bom dia</li>
</ul>
<p>Many others exist as well.</p>
</div>/* Sélectionne tous les premiers éléments */
.greetings :first-child{
color: blue;
}
/* Sélectionne tous les derniers éléments */
.greetings :last-child{
color: red;
}:first-of-type et :last-of-type
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
Très proches de :first-child et :last-child, les sélecteurs :first-of-type et :last-of-type permettent de sélectionner les premiers et derniers éléments d'un type.
<div class="greetings">
<p>Greetings can be different.</p>
<p>They depend on languages, like:</p>
<ul>
<li>Bonjour</li>
<li>Good morning</li>
<li>Buenos Dias</li>
<li>Guten Tag</li>
<li>Buongiorno</li>
<li>God Morgen</li>
<li>Bom dia</li>
</ul>
<p>Many others exist as well.</p>
</div>/* Sélectionne tous les premiers éléments d'un type */
.greetings li:first-of-type{
color: blue;
}
/* Sélectionne tous les derniers éléments d'un type */
.greetings li:last-of-type{
color: red;
}:not
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
La pseudo-classe :not est utilisée en combinaison avec un autre sélectaur auquel elle permet de faire une exception.
<div class="greetings">
<p>Greetings can be different.</p>
<p>They depend on languages, like:</p>
<ul>
<li>Bonjour</li>
<li>Good morning</li>
<li>Buenos Dias</li>
<li>Guten Tag</li>
<li>Buongiorno</li>
<li>God Morgen</li>
<li>Bom dia</li>
</ul>
<p>Many others exist as well.</p>
</div>/* Sélectionne tous les premiers éléments d'un type */
.greetings li:not(:nth-child(2)){
color: blue;
}Pseudos-elements
Un pseudo-éléments est un mot-clé qui permet de styler une partie spécifique d’un élément, par exemple, ce qui le précède, ou ce qui lui fait suite. Ici la liste de tous les pseudos-éléments.
::before
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
Le mot-clé ::before permet de créer un pseudo-élément qui sera le premier enfant de l’élément sélectionné.
<div class="greetings">
<p>Greetings can be different.</p>
<p>They depend on languages, like:</p>
<ul>
<li>Bonjour</li>
<li>Good morning</li>
<li>Buenos Dias</li>
<li>Guten Tag</li>
<li>Buongiorno</li>
<li>God Morgen</li>
<li>Bom dia</li>
</ul>
<p>Many others exist as well.</p>
</div>.greetings li{
list-style-type: none;
}
/* Crée un pseudo-élément avant les éléments de type li */
.greetings li::before{
content: "✎ ";
}::after
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
Le mot-clé ::after permet de créer un pseudo-élément qui sera le dernier enfant de l’élément sélectionné.
<div class="greetings">
<p>Greetings can be different.</p>
<p>They depend on languages, like:</p>
<ul>
<li>Bonjour</li>
<li>Good morning</li>
<li>Buenos Dias</li>
<li>Guten Tag</li>
<li>Buongiorno</li>
<li>God Morgen</li>
<li>Bom dia</li>
</ul>
<p>Many others exist as well.</p>
</div>.greetings li{
display: inline;
list-style-type: none;
}
/* Crée un pesudo-élément après les éléments de type li, sauf le dernier */
.greetings li:not(:last-of-type)::after{
content: ", ";
}
.greetings li:last-of-type::after{
content: ".";
}::first-line et ::first-letter
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
Les mot-clés ::first-line et ::first-letter permettent comme leur nom l’indique, de styler la première lettre ou la première ligne d’un élément sélectionné.
<div class="greetings">
<p>Greetings can be different.</p>
<p>They depend on languages, like:</p>
<ul>
<li>Bonjour</li>
<li>Good morning</li>
<li>Buenos Dias</li>
<li>Guten Tag</li>
<li>Buongiorno</li>
<li>God Morgen</li>
<li>Bom dia</li>
</ul>
<p>Many others exist as well.</p>
</div>.greetings li{
color: white;
}
.greetings li::first-line{
background: red;
}
.greetings li::first-letter{
background: blue;
}Combinateurs
Les combinateurs sont les signes-clés qui permettent de combiner les sélecteurs entre eux, à l’image de l’espace, qui permet de sélectionner le(s) descendant(s) d’un élément. Ici, la liste de tous les combinateurs.
Liste de sélecteurs
https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list
Le signe , permet de créer une liste de sélecteurs, à laquelle il est possible d’appliquer une série de commandes communes.
<div class="greetings">
<p>Greetings can be different.</p>
<p>They depend on languages, like:</p>
<ul>
<li>Bonjour</li>
<li>Good morning</li>
<li>Buenos Dias</li>
<li>Guten Tag</li>
<li>Buongiorno</li>
<li>God Morgen</li>
<li>Bom dia</li>
</ul>
<p>Many others exist as well.</p>
</div>li, p{
color: red;
}Sélecteur d’enfants
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
Le sélecteur d’enfant est un signe > qui permet de sélectionner le descendant direct d’un élement (contrairement à l’espace qui sélectonne tous les descedant, directs et indirects).
<div class="greetings">
<p>Greetings can be different.</p>
<p>They depend on languages, like:</p>
<ul>
<ul>
<li>Bonjour</li>
<li>Good morning</li>
<li>Buenos Dias</li>
<li>Guten Tag</li>
</ul>
<li>Buongiorno</li>
<li>God Morgen</li>
<li>Bom dia</li>
</ul>
<p>Many others exist as well.</p>
</div>.greetings > ul > li{
color: blue;
}
.greetings ul li{
background: yellow;
}Sélecteur de sibling suivant
https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator
Le sélecteur de sibling suivant est un signe + qui permet de sélectionner l’élément suivant directement l’élément sélectionné.
<div class="greetings">
<p>Greetings can be different.</p>
<p>They depend on languages, like:</p>
<ul>
<li>Bonjour</li>
<li>Good morning</li>
<li>Buenos Dias</li>
<li>Guten Tag</li>
<li>Buongiorno</li>
<li>God Morgen</li>
<li>Bom dia</li>
</ul>
<p>Many others exist as well.</p>
</div>li:first-of-type + li{
color: red;
}