Sélecteurs
CSS avancés
Les
règles des feuilles de styles CSS sont composées d'un
sélecteur qui désigne l'élément du
code HTML et d'une définition comportant une liste de
propriétés relatives à cet élément
HTML ou cette classe d'éléments.
Un
sélecteur peut être
un sélecteur simple ou un sélecteur composé,
ou une chaîne de sélecteurs simples ou composés
séparés par des combinateurs.
Si
un bloc de déclarations correspond à plusieurs
sélecteurs différents, on peut les regrouper en les
séparant par des virgules.
Vous
trouverez ci-après une liste des principaux sélecteurs CSS que vous
pouvez utiliser, classés par groupes de complexité croissante et
présentés sous la forme d'un exemple archétypal illustrant sa
syntaxe, suivi de sa retranscription en langage naturel.
Sélecteur
universel
*
==> tout élément
Sélecteur
de type d'élément
E
==> tout élément de type E
Sélecteur
de classe
.warning
==> tout élément de classe "warning"
E.warning
==> tout élément E de classe "warning" (idem
E[class~="warning"])
Sélecteur
d'identifiant
#id
==> tout élément d'identifiant "id"
E#id
==> tout élément E d'identifiant "id"
Combinateurs
E
F ==> tout élément F qui est le descendant d'un
élément E
E
> F ==> tout élément F qui est le fils d'un
élément E
E
+ F ==> tout élément F immédiatement précédé par
un élément E
E
~ F ==> tout élément F précédé par un élément E
Sélecteurs
d'attribut
E[attr]
==> tout élément E portant l'attribut "attr"
E[attr="val"]
==> tout élément E portant l'attribut "attr" et
dont la valeur de cet attribut est
exactement "val"
E[attr~="val"]
==> tout élément E dont l'attribut "attr"
contient une
liste de valeurs séparées par des espaces, l'une
de ces valeurs étant exactement égale à "val"
E[attr^="val"]
==> tout élément E dont la valeur de l'attribut "attr" commence
exactement par la chaîne "val"
E[attr$="val"]
==> tout élément E dont la valeur de l'attribut "attr" finit
exactement par la chaîne "val"
E[attr*="val"]
==> tout élément E dont la valeur de l'attribut "attr" contient
la sous-chaîne "val"
E[lang|="en"]
==> tout élément E dont l'attribut 'lang"
est une
liste de valeurs séparées par des tirets et
commençant (à gauche) par "en"
Pseudo-classe
de négation
E:not(...)
==> tout élément E qui ne correspond pas au sélecteur
entre parenthèses
Pseudo-classes
structurelles
E:root
==> tout élément E, racine du document
E:nth-child(n)
==> tout élément E qui est le n-ième enfant de son
parent
E:nth-last-child(n)
==> tout élément E qui est le n-ième enfant de son
parent en
comptant depuis le dernier enfant
E:nth-of-type(n)
==> tout élément E qui est le n-ième enfant de son
parent et
de ce type
E:nth-last-of-type(n)
==> tout élément E qui est le n-ième enfant de son
parent et
de ce type en comptant depuis le dernier enfant
E:first-child
==> tout élément E, premier enfant de son parent
E:last-child
==> tout élément E, dernier enfant de son parent
E:first-of-type
==> tout élément E, premier enfant de son type
E:last-of-type
==> tout élément E, dernier enfant de son type
E:only-child
==> tout élément E, seul enfant de son parent
E:only-of-type
==> tout élément E, seul enfant de son type
E:empty
==> tout élément E qui n'a aucun enfant (y
compris noeuds textuels purs)
Pseudo-classes
d'utilisation
E:link
==> tout élément E qui est la source d'un hyperlien
E:visited
==> tout élément E qui est la source d'un hyperlien dont
la cible a déjà été visitée
E:active
==> tout élément E lorsqu'il est cliqué par
l'utilisateur
E:hover
==> tout élément E lorsqu'il est survolé par la souris
E:focus
==> tout élément E lorsqu'il reçoit le focus clavier (ex:
champ texte cliqué)
E:target
==> tout élément E accédé par une ancre
Pseudo-classes
d'interface
E:enabled
==> tout élément d'interface E qui
n'est pas désactivé (cliquable)
E:disabled
==> tout élément d'interface E qui
est désactivé (non-cliquable)
E:checked
==> tout élément d'interface E qui
est coché
E:indeterminate
==> tout élément d'interface E qui
est non coché
Pseudo-classes
de contenu
E:contains("abc")
==> tout élément E dont le contenu textuel concaténé contient
la sous-chaîne "abc"
E:lang(fr)
==> tout élément E dont la langue est "fr"
Pseudo-éléments
E::first-line
==> tout première ligne formatée d'un élément E
E::first-letter
==> tout premier caractère formaté d'un élément E
E::selection ==>
toute partie d'un élément E qui est actuellement sélectionnée
par l'utilisateur
E::before
==> le contenu généré avant un élément E
E::after
==> le contenu généré après un élément E
Exemples
*
{ ==> mettre à zéro la marge et le remplissage de tous les éléments
margin:
0;
padding:
0;
}
body
> * ==> tout élément enfant direct d'un élément body
.container
* ==> tout élément enfant direct ou indirect d'un élément
de classe container
div.container
> ul tout élement ul enfant direct d'un élément div
de classe container
h1,
h2 ==> tout élément h1 ou h2
ul
+ p ==> tout élément p directement après un élément
ul
ul
~ p ==> tout élément p après un élément ul
a[title]
==> tout élément a qui a un attribut title
a[href*="google"]
==> tout élément a dont l'attribut href contient
"google"
a[href^="http"]
==> tout élément a dont l'attribut href commence
par "http"
a[href$=".jpg"]
==> tout élément a dont l'attribut href se termine
par ".jpg"
a:hover
==> tout élément a survolé par le curseur
a:link
==> tout élément a non cliqué
a:visited
==> tout élément a déjà cliqué
#id:target
==> tout élément d'identifiant id accédé par une ancre
<a href="#id">
*:not(p)
==> tout élément qui n'est pas un p
div:not(.container)
==> tout élément div qui n'est pas de classe container
input[type="radio"]:checked
==> tout élément input dont l'attribut type vaut
"radio" et qui a été coché
.clear:after
{ ==> après tout élément de classe clear, ajouter le contenu suivant
content:
"";
display:
block;
clear:
both;
visibility:
hidden;
font-size:
0;
height:
0;
}
p::first-letter ==> tout
premier caractère d'un élément p
p::first-line ==> tout
première ligne d'un élément p
ul
> li:first-child ==> tout premier élément li enfant direct
d'un élément ul
li:nth-child(3)
==> tout élément li qui est le troisième enfant de son
parent
li:nth-last-child(2)
==> tout élément li qui est l'avant-dernier enfant de son
parent
ul:nth-of-type(3)
==> tout élément qui est le troisième enfant ul de son
parent
Auteurs
Mathieu
Langue, Eric Pelzer
Références
http://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048
http://dl.free.fr/j50EPHSJO
Version PDF
Aucun commentaire:
Enregistrer un commentaire