- Accueil
- Info légales
- Aide (FAQ)
- Les tags de ce site
- Bloc note
- Articles techniques
- Notes system
- Divers articles
- Drupal
- Notes ITIL 2007
- Notes MS
- Dans le quartier...
- Emploi
- Recettes de cuisine et adresses gourmandes
- mes applis ubuntu préferées
- Divers acronymes du monde social
- Internet 2018
- P2 meublé à louer - quartier du Poteau 75018
- apcos - réseaux sociaux et outils
- Articles techniques
- Divers liens
- Fun
- Mon CV IT
- Nouveautés
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) h
3
+ 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 attributa[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 exactea[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 valeura[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