4. Sélecteurs CSS 2.1
• * — Tous les éléments
* { border: 0; }
• E — Éléments de type E
p { line-height: 1.5; }
• E F — Éléments F descendants de E
div a { text-decoration: underline; }
• E > F — Éléments F enfants de E
div > ul { background: green; }
5. Sélecteurs CSS 2.1
• E + F — Éléments F directement précédé de E
section h1 { margin: 1em; }
• E:lang(c) — Éléments E ayant la langue c
span:lang(en) { font-style: italic; }
• E[foo] — Éléments E ayant l’attribut foo
a[title] { border: 1px dotted #000; }
6. Sélecteurs CSS 2.1
• E :first-child — Premier élément de E
div :first-child { margin: 0; }
• E:link, E:visited — Éléments E dont l’ancre
n’a pas été visitée / a été visitée
a:link { color: blue; }
a:visited { color: green; }
• E:active, E:hover, E:focus — Éléments E
pendant des actions utilisateur
a:active { background-color: yellow; }
7. Sélecteurs CSS 2.1
• E[foo="bar"] — Éléments E dont l’attribut foo
vaut exactement bar
a[href="#top"] { color: pink; }
• E[foo~="bar"] — Éléments E dont l’attribut foo
contient bar
div[class~="warning"] { background-color: yellow; }
• E[foo|="bar"] — Éléments E dont l’attribut foo
commence par bar. Incluant le tiret.
a[hreflang|="en"] { font-style: italic; }
Fonctionne pour <a hreflang="en"> et <a hreflang="en-US">
8. Sélecteurs CSS 2.1
• .foo, E.foo — Éléments ou éléments E dont
l’attribut class vaut foo
.warning, div.warning { color: red; }
• #foo, E#foo — Éléments ou éléments E dont
l’attribut id vaut foo
#note, div#note { color: blue; }
9. Sélecteurs CSS3
• E ~ F — Éléments F précédé d’un élément E
figure ~ figcaption { font-size: 80%; }
• E :not(s) — Éléments excluant le sélecteur s
div *:not(p) { margin: 0; }
• E:root — Premier élément du document
div:root { font-size: 100%; }
10. Sélecteurs CSS3
• E :last-child — Dernier enfant de E
ul:last-child { margin-bottom: 1em; }
• E:empty — Éléments E vides
div:empty { display: none; }
• E:target — Élément E cible de l’ancre en cours
h1:target { text-decoration: underline; }
11. Sélecteurs CSS3
• E :nth-child(n) — Le n ième enfant de E
div :nth-child(3) { background: red; }
div :nth-child(3n+1) { background: red; }
• E :nth-last-child(n) — Idem, en comptant de la fin
div :nth-last-child(3) { background: red; }
• E:nth-of-type(n) — Le nième élément de type E
div img:nth-of-type(3) { background: green; }
• E:nth-last-of-type(n) — Idem, en comptant de la fin
div img:nth-last-of-type(3) { background: green; }
12. Sélecteurs CSS3
• E :only-child — Le seul enfant de E
div :only-child { background: blue; }
• E:first-of-type — Le premier élément de type E
div img:first-of-type { background: red; }
• E:last-of-type — Le dernier élément de type E
div img:last-of-type { background: green; }
• E:only-of-type — Le seul élément de type E
div p:only-of-type { background: yellow; }
13. Sélecteurs CSS3
• E[foo^="bar"] — Éléments E ayant l’attribut foo qui
commence par bar
a[class^="number-"] { padding: 0; }
• E[foo$="bar"] — Éléments E ayant l’attribut foo qui
se termine par bar
a[class$="ing"] { padding: 1em; }
• E[foo*="bar"] — Éléments E ayant l’attribut foo qui
contient bar
a[class*="ost"] { padding: .5em; }
17. Media Queries
+ only, not, and
<link rel="stylesheet" type="text/css"
media="screen and (min-width: 400px) and (max-width: 700px)"
href="css/global.css">
@media screen and (min-width: 400px) and (max-width: 700px) {
body {…}
}
20. Backgrounds
multiple backgrounds
div {
background:
url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) 11px 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;
}
