Les Pseudo-classes

Une pseudo-classe CSS est un mot-clé ajouté au sélecteur pour indiquer un état particulier de l'élément qui doit être sélectionné.
Les pseudo-classes portent sur des éléments existants dans le code source du document et auxquels on peut accéder par des caractéristiques autres que leur nom, attribut ou contenu. C’est une manière de cibler un élément sans ajouter une classe (manuellement ou par l’intermédiaire de JavaScript). en fonction de l’existence ou de la valeur d’un attribut.

1. first-child et last-child

La pseudo-classe :first-child, désigne le premier élément enfant au sein d’un élément. Par exemple, li:first-child qualifie le premier élément "li" d’une liste.

Syntaxe :
div p:first-child{
color:blue;
}

2. Cibler avec :nth-child

:nth-child est une pseudo-classe qui fait partie du Selectors Level 3, elle permet de cibler le n-ième enfant d’un élément.

Syntaxe :
div p:nth-child(2){
color:blue;
}

nth signifie n-ième, ce sélecteur permet donc de sélectionner le/les n-ièmes enfants d’un élément- Il y a plusieurs façon de procéder :


- Valeur numérique entière (cible un seul enfant)
- Valeur de n, éventuellement suivie d’une valeur entière ajoutée ou soustraite.

A. Cibler le deuxième li de notre ul

B. Cibler les éléments pairs de chaque ul

C. Cibler les éléments impairs de chaque ul

D. Cibler les 3 premiers li du ul

3. Cibler avec nth-last-child

La pseudo-classe CSS :nth-last-child permet de cibler des éléments suivant la position qu'ils occupent dans la liste des enfants de l'élément parent. C'est comme :nth-child sauf que l'on part de la fin.

Les arguments acceptés sont les même que :nth-child.

Syntaxe :
div p:nth-last-child(2){
color:blue;
}

E. Cibler les 3 derniers li du ul

Cibler avec nth-of-type

Le sélecteur nth-of-type ne prend en compte que les éléments de même type pour effectuer les groupes.

Syntaxe :
div p:nth-of-type(2){
color:blue;
}

A. Cibler le 3ème paragraphe

Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet?

Retinete igitur in provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit.

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

B. Colorer chaque paragraphe dans 4 couleurs différentes

Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet?

Retinete igitur in provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit.

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet?

Retinete igitur in provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit.

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet?

Retinete igitur in provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit.

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

C. Faire flotter les images impaires à gauche et paires à droite

Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet?

Retinete igitur in provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit.

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet?

Retinete igitur in provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit.

Cibler avec le selecteur ":not()" - CSS3/4

:not est une pseudo-classe qui permet de retirer un élément, ou l’état d’un élément, du sélecteur.

Syntaxe :
.item:not(p){
color:blue;
}

En CSS3, seuls les sélecteurs et pseudo-classes simples peuvent êtres utilisées et les :not() ne peuvent pas être imbriqués. Depuis le CSS4, elle permet de désélectionner les éléments contenus entre les parenthèses (supporté par aucun navigateur à ce jour).

A. Ciblez les p de la section du ciblage09 en excluant ceux qui possèdent la classe "conclusion"

B. Ciblez dans l'ul du ciblage09 les éléments "li" NON survolés

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

Titre de section

Titre d'article

sous-titre d'article

Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet?

Retinete igitur in provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit.

sous-titre d'article

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet?

Retinete igitur in provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit.

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet?

sous-titre d'article

Retinete igitur in provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit.

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

Exercice de ciblage avec :is()

La pseudo-classe de sélection :is() permet de sélectionner plusieurs arguments pour un même élément. Grâce à ce sélecteur nous allons pouvoir grouper et identifier des éléments dans nos feuilles de styles.

https://developer.mozilla.org/fr/docs/Web/CSS/:is

Syntaxe :
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}

Sélectionne n'importe quel paragraphe survolé qui se trouve au sein d'un header, main, ou footer

La notation précédente est équivalente à

header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}

Titre de section

Titre d'article

sous-titre d'article

Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet?

Retinete igitur in provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit.

sous-titre d'article

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet?

Retinete igitur in provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit.

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

Quid? qui se etiam nunc subsidiis patrimonii aut amicorum liberalitate sustentant, hos perire patiemur? An, si qui frui publico non potuit per hostem, hic tegitur ipsa lege censoria; quem is frui non sinit, qui est, etiamsi non appellatur, hostis, huic ferri auxilium non oportet?

sous-titre d'article

Retinete igitur in provincia diutius eum, qui de sociis cum hostibus, de civibus cum sociis faciat pactiones, qui hoc etiam se pluris esse quam collegam putet, quod ille vos tristia voltuque deceperit, ipse numquam se minus quam erat, nequam esse simularit.

Piso autem alio quodam modo gloriatur se brevi tempore perfecisse, ne Gabinius unus omnium nequissimus existimaretur.

Dans le futur .... Cibler avec :matches(), :nth-match(), nth-last-match() - CSS4

Reconnue à ce jour par aucun navigateur.

La pseudo-classe de sélection :matches permet de sélectionner plusieurs arguments pour un même élément. Grâce à ce sélecteur nous allons pouvoir grouper et identifier des éléments dans nos feuilles de styles.

Syntaxe :
p:matches(:hover, .S1, #S2) {
color:blue;
}