CSS Selector de référence

De référence W3Schools des CSS est testé régulièrement avec tous les principaux navigateurs.
Testé: Janvier 13, 2012.

---

Sélecteurs CSS

En CSS, les sélecteurs sont des modèles utilisés pour sélectionner l'élément (s) que vous voulez appliquer un style.

Le "CSS" colonne indique dans quelle version CSS la propriété est définie (CSS1, CSS2, CSS3 ou).

Sélecteur	Exemple	Exemple de description	CSS
. classe	.intro	Sélectionne tous les éléments avec class = "intro"	1
# id	#firstname	Sélectionne l'élément avec id = "prénom"	1
*	*	Sélectionne tous les éléments	2
élément	p	Sélectionne tous les éléments <p>	1
élément, l'élément	div,p	Sélectionne tous les éléments clés et tous les éléments <p>	1
élément élément	div p	Sélectionne tous les éléments à l'intérieur des éléments clés <p>	1
élément > élément	div>p	Sélectionne tous les éléments <p> où le parent est un élément <div>	2
élément + élément	div+p	Sélectionne tous les éléments qui sont placés <p> immédiatement après les éléments clés	2
[ attribut ]	[target]	Sélectionne tous les éléments avec un attribut cible	2
[ attribut = valeur ]	[target=_blank]	Sélectionne tous les éléments avec target = "_blank"	2
[ attribut ~ = valeur ]	[title~=flower]	Sélectionne tous les éléments avec un attribut title contenant le mot "fleur"	2
[ attribut | = valeur ]	[lang|=en]	Sélectionne tous les éléments avec une valeur d'attribut lang en commençant par "fr"	2
: Lien	a:link	Sélectionne tous les liens non visités	1
: Visited	a:visited	Sélectionne tous les liens visités	1
: Actif	a:active	Sélectionne le lien actif	1
: Hover	a:hover	Sélectionne liens sur la souris sur	1
: Mettre l'accent	input:focus	Sélectionne l'élément d'entrée qui a le focus	2
: La première lettre	p:first-letter	Sélectionne la première lettre de chaque élément <p>	1
: La première ligne	p:first-line	Sélectionne la première ligne de chaque élément <p>	1
: La première enfant	p:first-child	Sélectionne tous les éléments <p> qui est le premier enfant de son parent	2
: Avant	p:before	Insérer le contenu avant que le contenu de chaque élément <p>	2
: Après	p:after	Insérer le contenu après chaque élément <p>	2
: Lang ( langue )	p:lang(it)	Sélectionne tous les éléments <p> avec une valeur d'attribut lang en commençant par "il"	2
element1 ~element2	p ~ ul	Sélectionne chaque élément <ul> qui sont précédés par un élément de <p>	3
[ attribut ^ = valeur ]	un [src = ^ "https"]	Sélectionne tous les éléments dont <a> attribut src valeur commence par «https»	3
[ attribuent $ =valeur ]	un [src = $ ". pdf"]	Sélectionne tous les éléments dont <a> attribut src valeur se termine par ". Pdf"	3
[ attribut = * valeur ]	un [src * = "w3schools"]	Sélectionne tous les éléments dont <a> attribut src valeur contient les sous-chaîne "w3schools"	3
: Des premier type	p: des premier type	Sélectionne tous les éléments <p> qui est l'élément premier de son <p> parent	3
: Last-of-type de	p: last-of-type de	Sélectionne tous les éléments <p> qui est l'élément <p> dernière de son parent	3
: Seulement de type	p: seulement de type	Sélectionne tous les éléments <p> qui est l'élément <p> seulement de son parent	3
: Seulement l'enfant	p: que l'enfant	Sélectionne tous les éléments <p> qui est le seul enfant de son parent	3
: Nth-child ( n )	p: nth-child (2)	Sélectionne tous les éléments <p> qui est le deuxième enfant de son parent	3
: Nth-last-child ( n )	p: nth-last-child (2)	Sélectionne tous les éléments <p> qui est le deuxième enfant de son parent, en comptant à partir du dernier enfant	3
: Nth-of-type ( n )	p: n-de-type (2)	Sélectionne tous les éléments <p> qui est l'élément <p> secondes de son parent	3
: Nth-last-of-type ( n)	p: n-dernière de type (2)	Sélectionne tous les éléments <p> qui est l'élément <p> deuxième de sa société mère, à compter de l'enfant dernier	3
: Last-child	p: last-child	Sélectionne tous les éléments <p> qui est le dernier enfant de son parent	3
: Root	: Root	Sélectionne l'élément racine du document	3
: Vide	p: vide	Sélectionne tous les éléments que <p> n'a pas d'enfants (y compris les nœuds de texte)	3
: Cible	# Nouvelles: cible	Sélectionne le courant élément actif # nouvelles (cliqué sur une URL contenant ce nom de l'ancre)	3
: Permis	entrée: permis	Sélectionne tous les éléments <input> activé	3
: Désactivé	entrée: désactivé	Sélectionne tous les éléments <input> handicapés	3
: Vérifié	entrée: vérifié	Sélectionne tous les éléments <input> vérifié	3
: Non ( sélecteur )	: Non (p)	Sélectionne tous les éléments qui ne sont pas un élément <p>	3
:: Sélection	:: Sélection	Sélectionne la partie d'un élément qui est sélectionné par un utilisateur