CSS selectors bruges til at definere hvor i dokumentstrukturen, at selve elementet findes.

Document tree

Træstrukturen indeholder alle elementer på siden. Hvert element har nøjagtig et "parent" element, undtagen "root" (top) elementet der ikke har nogen, for en hjemmeside er det HTML elementet.

Attribute selectors

Type selector

h2 { text-decoration: underline; } * { text-decoration: underline; }

Class selector

.myclass { text-decoration: underline; }

Id selector

#myid { text-decoration: underline; }

Link pseudo-class selector

a:link { color: blue; } a:visited { color: purple; }

Dynamic pseudo-class selector

a:active { color: #666666; } a:hover { text-decoration: underline; } a:focus { outline: 1px dashed red; }

Language pseudo-class

Matcher hvis sproget er sat til "c".

p:lang(c) { color: #666666; }

Typographic pseudo-element selector

p:first-line { font-weight: bold; } p:first-letter { font-size: 2em; }

Content pseudo-element selector

p:before { content: "["; } p:after { content: "]"; }

First-child pseudo-class selector

p:first-child { margin-top: 0; }

Attribute selector

Har et "undertag" med navnet [...], har et undertag med indholdet [type=...], har et undertag med indholdet som et af flere mellemrumsseparerede eller har et undertag med indholdet som det første ud af flere der er bindestregssepareret.

option[selected] { color: #ff0000; } /* Indeholder selected */ input[type="password"] { color: #cccccc; } /* Indeholder type="password" */ a[rel~="next"] { background: #ffffff; } /* Indeholder "next" mellemrumssepareret */ *[lang|="en"] { color: red; } /* Indeholder "en" som den første bindestregssepareret */

Descendant selector

#mainpage h2 { text-decoration: underline; }

Child selector

#title > p { font-weight: bold; }

Adjacent sibling selector

h2 + p { font-style: italic; }

Multiple selections

p, .paragrah, #paragraph1 > p, div#paragraph1, p.warning { color: #cccccc; }

Child ">"

Et child er omkranset af et parent tag, p er child af div:

<div>
  <p>Der var engang</p>
</div>

div > p

Kun grandchilds: div * > p

Descendant " "

En descendant er omkranset af et parent tag, med eventuelle andre tags imellem. Et child er derfor også altid en descendant, men en descendant er ikke nødvendigvis et child. em er descendant af både p og div.

<div>
  <p>Der var <em>engang</em></p>
</div>

div em

Sibling "+"

Et element er "sibling" til et andet element, hvis de deler det samme "parent" element. Hvis elementet står før sin "sibling" er det en "preceeding sibling", kommer det efter er det en "following sibling". h2 er "preceeding sibling" til p.

<div>
  <h2>Overskrift</h2>
  <p>Der var <em>engang</em></p>
</div>

div > h2 + p

Ancestor

Det modsatte af en descendant, altså et element der omkranser et underliggende element.

Preceding element

Et element er et "preceding element", hvis det omkranser et andet element eller er en "preceeding sibling".

Following element

Et element er et "following element", hvis det foregående er et "preceding element".