CSS 🩄 Tous les sĂ©lecteurs avec exemples et explications

Partager sur email
Partager sur twitter
Partager sur linkedin
Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur facebook
Partager sur whatsapp
Partager sur email
Les sélécteurs CSS / HTML : Exemple et explications

Les sélecteurs CSS permettent de cibler des éléments et pseudo-éléments HTML. Ici, nous voyons tous les sélecteurs avec un exemple et une explication pour chacun.

CSS: Les sélecteurs simples

Exemple de syntaxe CSSDescription du sélecteur CSS
h2 {} Le sĂ©lecteur de type permet de cibler les Ă©lĂ©ments HTML du mĂȘme nom. Ici, toutes les titres H2.
.my-class {}Le sĂ©lecteur de class permet de cibler les Ă©lĂ©ments ayants l’attribut « class » spĂ©cifiĂ©.
#my-id {} Le sĂ©lecteur d’ID permet de cibler les Ă©lĂ©ments ayants l’attribut « id » spĂ©cifiĂ©.
* {}Le sélecteur universel permet de cibler tous les éléments.

CSS: Les combinateurs de sélecteurs

Exemple de syntaxe CSSDescription du sélecteur CSS
h1, h2 {} Ce sélecteur permet de cibler tous les H1 et tous les H2.
p a {}Ce sĂ©lecteur permet de cibler tous les liens contenus a l’intĂ©rieur d’un paragraphe.
p > a {}Ce sélecteur permet de cibler les liens ayants comme parent immédiat un paragraphe.
h1 + h2 {}Ce sélecteur permet de cibler tous les H2 directement placés aprÚs un titre H1.
h1 ~ p {}Ce sélecteur permet de cibler tous les H1 précédés par un paragraphe.

CSS: Les sĂ©lecteurs d’attributs

Exemple de syntaxe CSSDescription du sélecteur CSS
[target] {} Permet de cibler les éléments ayants un attribut « target ».
[title~=wprock] {}Ce sélecteur permet de cibler tous les éléments HTML ayants un attribut « title » contenant le mot « wprock ».
a[href^="https"] {}Ce sélecteur permet de cibler tous les liens ayants un attribut « href » commençant par « https ».
a[href$=".pdf"] {}Ce sélecteur permet de cibler tous les liens ayant un attribut « href » finissant par « .pdf ».
a[href*="wprock.fr"] {}Ce sélecteur permet de cibler tous les éléments HTML ayant un attribut « href » contenant « wprock.fr ».

CSS: Les pseudo-éléments

Les sĂ©lecteurs CSS de pseudo Ă©lĂ©ments se reconnaissent par l’utilisation de « :: ».

Exemple de syntaxe CSSDescription du sélecteur CSS
a:link {} Permet de cibler les liens qui n’ont pas Ă©tĂ© visitĂ©s.
a:visited {}Permet de cibler les liens qui ont été visités.
a:hover {}Permet de cibler un lien survolé avec la souris.
a:active {}Permet de cibler le lien sélectionné.

CSS: Les pseudo-class

Les sĂ©lecteurs CSS de pseudo class se reconnaissent par l’utilisation de « : ». Ils permettent de cibler des Ă©lĂ©ments selon leurs Ă©tats.

CSS: Les pseudo-class pour les liens

Exemple de syntaxe CSSDescription du sélecteur CSS
a:link {} Permet de cibler les liens qui n’ont pas Ă©tĂ© visitĂ©s.
a:visited {}Permet de cibler les liens qui ont été visités.
a:hover {}Permet de cibler un lien survolé par la souris.
a:active {}Permet de cibler le lien sélectionné.

CSS: Les pseudo-class pour les formulaires

Exemple de syntaxe CSSDescription du sélecteur CSS
input:checked {}Permet de sélectionner tous les éléments input cochés.
input:disabled {}Permet de sélectionner tous les éléments input désactivés.
input:enabled {}Permet de sélectionner tous les éléments input activés.
input:focus {}Permet de sĂ©lectionner l’Ă©lĂ©ment input qui a le focus.
input:in-range {}Permet de sélectionner tous les éléments input de types nombre(« number ») dont les valeurs sont comprise dans les limites spécifiées (attribut « min » et « max »).
input:out-of-range {}Permet de sélectionner tous les éléments input de types nombre (« number ») dont les valeurs ne sont pas comprise dans les limites spécifiées (attribut « min » et « max »).
input:invalid {}Permet de sélectionner tous les éléments input dont les valeurs sont invalides.
input:valid {}Permet de sélectionner tous les éléments input dont les valeurs sont valides.
input:optional {}Permet de sĂ©lectionner tous les Ă©lĂ©ments input dont qui n’ont pas d’attribut « required ».
input:required {}Permet de sĂ©lectionner tous les Ă©lĂ©ments input dont qui ont d’attribut « required ».
input:read-only {}Permet de sĂ©lectionner tous les Ă©lĂ©ments input qui ont l’attribut « readonly ».
input:read-write {}Permet de sĂ©lectionner tous les Ă©lĂ©ments input qui n’ont pas d’attribut « readonly ».

CSS: Les pseudo-class par position

Exemple de syntaxe CSSDescription du sélecteur CSS
h2:first-child {}Permet de sélectionner tous les H2 qui sont les premiers enfants de leurs parents.
h2:last-child {}Permet de sélectionner tous les H2 qui sont les derniers enfants de leurs parents.
h2:first-of-type {}Permet de sélectionner tous les éléments H2 qui sont les premiers éléments H2 de leurs parents.
h2:last-of-type {}Permet de sélectionner tous les éléments H2
qui sont les derniers éléments
de leurs parents.
h2:nth-child(2) {}Permet de sélectionner tous les éléments H2
qui sont les deuxiĂšmes enfants de leurs parents
h2:nth-last-child(2) {}Permet de sélectionner tous les éléments H2
qui sont les deuxiĂšmes enfants de leurs parents. Le compte commence Ă  partir du dernier enfant.
h2:nth-last-of-type(2) {}Permet de sélectionner tous les éléments H2
qui sont les deuxiÚmes éléments
de leurs parents. Le compte commence Ă  partir du dernier enfant.
h2:nth-of-type(2) {}Permet de sélectionner tous les éléments H2
qui sont les deuxiÚmes éléments
de leurs parents.

CSS: Les autres sélecteurs de pseudo-class

Exemple de syntaxe CSSDescription du sélecteur CSS
h2:empty {}Permet de sĂ©lectionner un Ă©lĂ©ment H2 qui n’a pas d’enfant.
h2:lang(fr) {}Permet de sĂ©lectionner tous les Ă©lĂ©ments H2 qui ont l’attribut « lang » Ă©gal Ă  « fr ».
*:not(h2) {}Permet de sélectionner tous les éléments qui ne sont pas des H2.
p:only-child {}Permet de sélectionner tous les éléments H2
qui sont les seuls enfants de leurs parents.
Julien MA Jacob
DĂ©veloppeur WordPress
Julien MA Jacob - DĂ©veloppeur WordPress
PassionnĂ© par le web et la programmation avec toujours plein de projets en tĂȘte
  Discussion autour de l'article
S’abonner
Notifier de
guest
0 Commentaires
Inline Feedbacks
View all comments