Sélecteurs avancés Css 3

la base

sélecteur universel (toutes les balises sans exception)  * { }

A B (balises B situées entre des A)    ex: "h3 em {}" sur HTML  <h3>Titre avec <em>texte important</em></h3>

A + B  (la première balise B située après une A, de css2)  h3 + p { } 
Sélectionne la première balise <p> située après un titre <h3> (elles ont le meme parent).

Ex2, où h1 doit avoir class="opener", h2 la suit: h1.opener + h2

encore...

Combinateur d'ajacence indirecte ~
Ont le meme parent, la 1ere précède (pas forcément immédiatement) la seconde.
Ex CSS 3 : p ~ ul  prend chaque ul précédé d'un p

Un élément p qui est le fils de body : body > p
Un ex: div ol>li p  p est descendant d'un li, li étant fils d'un ol, avec ol descendant d'un div (css2). Le 1er fils d'un descendant est :first-child

 

[attribut] : une balise qui possède un attribut
a[title] {} Sélectionne tous les liens <a> qui possèdent un attribut title (<a href="http://site.com" title="Infobulle">).
[target] sel tous les éléments qui ont un attribut target

A[attribut="Valeur"] : une balise, un attribut et une valeur exacte
a[title="Cliquez ici"]{}  Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ».
Ex: <a href="http://site.com" title="Cliquez ici">

[target=_blank] sel tous les éléments qui ont target="_blank"

[attribute~=value] [title~=flower] tous elm avec title contenant le mot "flower"

[attribute|=value]   [lang|=en] tous elm avec lang qui commence par "en"

[attribute^=value] a[href^="https"] chaque <a> qui a href commencant par "https"

[attribute$=value] a[href$=".pdf"]    chaque <a> qui a href terminant par ".pdf"

A[attribut*="Valeur"] : une balise, un attribut et une valeur
a[title*="ici"] {}  Idem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position: <a href="http://site.com" title="Quelque part par ici">).

a[href*="w3schools"]  chaque <a> qui a href qui contient la sous-chaine "w3schools"

Sélecteur ex desc de l'ex css
:active a:active Sel lien actif 1
::after p::after Insert content after every <p> element 2
::before p::before Insert content before the content of every <p> element 2
:checked input:checked Selects every checked <input> element 3
:disabled input:disabled Selects every disabled <input> element 3
:empty p:empty Selects every <p> element that has no children (including text nodes) 3
:enabled input:enabled Selects every enabled <input> element 3
...      

Sur le web

voir en fr http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-...

ref en fr http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors

http://www.w3schools.com/cssref/css_selectors.asp

logo drush