L'operateur + des sélecteur CSS2 permet d'atteindre l'élément successeur direct d'un élément
Pour sélectionner tout élément Y successeur direct d'un élément X
non note :
Ainsi h2 + p sélectionne tout paragraphe successeur d'un titre h2
L'operateur ~ des sélecteur CSS3 permet d'atteindre les éléments successeurs d'un élément
Les successeurs ne sont pas nécéssairement consécutifs
Ainsi h2 ~ p sélectionne tous les paragraphes successeurs d'un titre h2
Et h1 ~ h2 selectionne tous les titres h2 successeurs d'un élément h1
Bien que l'opérateur + soit plus spécifique l'opérateur ~ , ils ont la même priorité selon les règles de la cascade
Les sélecteurs d'attribut portent sur la présence ou la valeur d'un attribut
Pour ne sélectionner que les éléments dotés d'un attribut de nom donné on note :
Ainsi p[title] ne portera que sur les paragraphes enrichis d'un attribut title.
Il est possible d'imposer la présence de plusieurs attributs :
Pour ne sélectionner que les éléments dotés d'un attribut de nom donné ayant une certaine valeur on note :
Ainsi img[alt="logo"] ne portera que sur les images enrichies d'un attribut "alt" ayant pour valeur "logo"
On peut imposer plusieurs contraintes simultannées sur les valeurs exactes de plusieurs attributs :
La valeur de certains attributs peut être composée de plusieurs termes séparés par un espace. Par exemple : <p class="exemple important">
ou <h1 title="La
planete bleue">
Pour ne sélectionner que les éléments dotés d'un attribut de nom donné, comprenant, parmi ses multiples valeurs, une valeur fixée on note:
Ainsi p[class~="exemple"] et p[class~="important"] sélectionnent tous deux les paragraphes <p class="exemple important">Notons que :
elt[classe~="nom_classe"] est équivalent à elt.nom_classe ( notation des classes)
et plus généralement
elt[classe~="classe1"][classe~="classe2"]... [classe~=" classeN"] équivalent à elt.nom_classe1.classe 2 ... .classeN
Remarque : bien que les notations ci-dessus soient équivalentes leurs priorités sont différentes selon les règles de la cascade.
La valeur de certains attributs peuvent être composés de plusieurs termes séparés par un tiret. C'est le cas pour l'attribut lang : <p lang="fr-ca">
Pour ne sélectionner que les éléments dotés d'un attribut dont le premier terme (avant le premier tiret) prend une valeur donnée on note :
Ainsi p[lang|="fr"] sélectionne le paragraphe <p lang="fr-ca"> ou <p lang="fr">
Notons que
elt[lang="nom_lang"] est équivalent à elt:lang(nom_lang) ( pseudo-classe :lang() )
Pour ne sélectionner que les éléments dotés d'un attribut dont la valeur commence par une chaine donnée, on note :
Ainsi a[href ^= "http://"] permet de sélectionner tous les liens externes
Pour ne sélectionner que les éléments dotés d'un attribut dont la valeur se termine par une chaine donnée, on note :
Ainsi a[href $= ".fr"] permet de sélectionner tous les liens se terminant en ".fr"
Pour ne sélectionner que les éléments dotés d'un attribut dont la valeur contient une chaine donnée, on note :
Ainsi p[title *= "html"] permet de sélectionner les paragraphes suivants :
CSS3 introduit de nouvelles pseudo classes
La pseudo classe :root permet de sélectionner la racine d'un document. Dans le cas d'un document "html" il s'agit bien entendu de l'élément html lui-même. Le sélecteur :root prend tout son intérêt dans le cas d'un document XML.
elt:nth-child(k), permet d'atteindre tout élément elt qui est le kieme enfant de son parent
Soit le code suivant :
et les définitions CSS :On obtient le résultat :
La seconde déclaration CSS (dd:nth-child(3) {color : blue;}) ne concerne aucun élément car le troisième enfant n'est pas un élément dd.
Dans la déclaration :nth-child(expression), expression peut être un nombre ou un terme de la forme xn + y ou x et y sont des nombres.
Ainsi :nth-child(2n + 1) concernera tous les éléments d'ordre impair et :nth-child(3n + 0) concernera tous les éléments dont l'ordre est un multiple de 3.
:nth-last-child(expression) fonctionne selon le même principe que :nth-child(expression) sinon que la position est déterminée en partant du dernier enfant.
En reprenant la liste de définitions précédente avec la CSS ci-dessous :
on obtient le résultat suivant :
Le premier sélecteur (dt:nth-last-child(3) {color : red;}) ne s'applique à aucun élément puisque le troisième enfant de l'élément dl en partant de la fin est un élément dd et non dt.
Comme pour le sélecteur "nth-child", dans la déclaration :nth-last-child(expression), expression peut être un nombre ou un terme de la forme xn + y ou x et y sont des nombres.
elt:nth-of-type(k), permet d'atteindre tout élément elt qui est le kieme enfant de type elt de son de son parent
Comme pour le sélecteur "nth-child" et "nth-last-child", dans la déclaration :nth-of-type(expression), expression peut être un nombre ou un terme de la forme xn + y ou x et y sont des nombres.
elt:nth-last-of-type(k), permet d'atteindre tout élément elt qui est le kieme enfant de type elt de son de son parent en partant du dernier enfant
:first-child ≡ nth-child(1)
:last-child ≡ :nth-last-child(1)
:first-of-type ≡ :nth-of-type(1)
:last-of-type ≡ :nth-last-of-type(1)
:nth-child(2n + 0) ≡ nth-child(even)
:nth-child(2n + 1) ≡ nth-child(odd)
La pseudo-classe :only-child permet de sélectionner un élément qui est l'unique enfant de son parent
Ainsi, li:only-child sélectionne les éléments li des listes à un seul item
Cette pseudo classe s'adresse aux éléments vides de tout contenu affichable
1
La pseudo-classe not() permet la sélection d'éléments autres que ceux spécifiés dans l'argument de la négation
On précise dans les parenthèses de la négation le critère de non sélection
Le critère peut être un nom d'élément, un nom de classe, un nom d'identifiant, une pseudo-classe, mais pas un sélecteur composé
Soit le code suivant :
Limite : on ne peut utiliser des sélecteurs combinés comme argument de :not()
La pseudo-classe :target permet de sélectionner un élément ciblé par un lien
L'élément ciblé est désigné par son identifiant
paragraphe 1
paragraphe 2
paragraphe 3
paragraphe 4
paragraphe 5
En CSS3 les pseudos-éléments sont notés en utilisant l'opérateur "::" et non ":" comme en CSS2
Ainsi on retrouve les pseudo-éléments ::first-line, ::first-letter, ::before et ::after avec la même sémantique qu'en CSS2.
Le selecteur ::selection permet d'appliquer des propriétés CSS à la sélection courante.
Ainsi p::selection s'applique à tout paragraphe sélectionné.
Fonctionne avec Chrome, mais pas pas avec Firefox.
Ne concerne que certaines propriétés telles la couleur, la couleur de fond ou l'ombrage du texte
Dans cette page ces propriétés sont appliquées aux titres h2 sélectionnés par l'utilisateur ainsi qu'aux paragraphes de cette section
permet de sélectionner un élément input activé ou désactivé
permet de sélectionner un élément input activé ou désactivé
permet de sélectionner un élément input ayant pour attribut type="checkbox" ou type="radio" qui est coché
Homme
Femme
permet de sélectionner un élément input ayant un attribut de type numérique selon que la valeur saisie appartienne à l'intervalle requis ou non