wpRock

CSS 🩄 Tous les sĂ©lecteurs avec exemples 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.
  La newsletter wpRock : Du contenu sur le développement et la création web
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 đŸ‘šâ€đŸ’» | Page Ă  propos
  Discussion autour de l'article
S’abonner
Notification pour
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires