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

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

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

avatar
  S’abonner  
Notifier de