Bert Bos |
Selectors (Future CSS, Utrecht 2013)
Principes
Voor CSS, een document is altijd een
boomstructuur met twee soorten, geordende knopen:
- elementen
- Unicode tekst (alleen als blad)
Elementen hebben nul of meer, ongeordende attributen en
een optionele unieke naam (ID)
Voorbeelden van bomen
Voorbeelden:
- SGML, XML, HTML5: element → element, attribuut →
attribuut, tekst → tekst, ID → ID (commentaar,
processing instructions, doctypes, entities worden niet gebruikt)
- Programmeertalen (blok/statement/functie/etc. → element)
Binnen en buiten de boom
- Selectors selecteren elementen en pseudo-elementen
- Dus geen attributen, commentaren, letters…
- Gebaseerd op informatie in de boom (vgl. XPath) of buiten de
boom
- Binnen de boom: element naam, attribuut, volgorde…
- Buiten de boom: semantiek (
:link
), geschiedenis
(:visited
), interactie (:hover
), etc.
Nieuw in niveau 3
- Naamruimte
x|y
(voor XML Namespaces)
- Zusters
E ~ F
- Tekst-matching
~= ^= $= *= |=
(voor attributen)
- Pseudo-klassen voor boomstructuren
:root :nth-child() enz.
- Pseudo-klasse voor hyperlink-doelen
:target
- Pseudo-klassen voor formulieren
:enabled :disabled :checked
- Negatie
:not()
Zuster-elementen
E ~ F
een element F dat een oudere zuster E heeft
(d.w.z. een element F met dezelfde ouder als E maar later in de
boom)
#french ~ p {
font-weight: bold;
color: #077;
font-size: 1.4em;
padding-left :1em;
}
Attribuut-selectors
E[foo]
een element E dat een attribuut
genaamd foo heeft
img[alt] {
border: 10px rgb(147,103,94) solid;
border-radius: 10px;
}
Negatie-selectors
E:not(s)
een element E dat niet aan
s voldoet
img:not([alt]) {
border: 10px rgb(147,103,94) solid;
border-radius: 10px;
}
Attribuut bevat tekst
E[foo*="bar"]
een element E met een
attribuut foo dat de rij tekens „bar” bevat
a[href*="glossaire"] {
color: gray;
}
Attribuut begint met tekst
E[foo^="bar"]
een element E met een
attribuut foo waarvan de waarde begint met de tekst „bar”
a[href^="http:"] {
color:#6996d3;
padding-left:1em;
text-decoration:none;
}
Attribuut eindigt met tekst
E[foo$="bar"]
een element E dat een
attribuut foo heeft dat eindigt met de tekst „bar”
a[href$=".pdf"]::after {
content:url(pictopdf.gif)
vertical-align: -20px;
}
Eerste kind
E:first-child
een element E dat het eerste element in zijn ouder is
th:first-child {
border-left: none;
text-align: left }
th:nth-child(1) { /* identiek! */
border-left: none;
text-align: left }
Laatste element van een bepaald type
E:last-of-type
een element dat het laatste element
van type E is in zijn ouder
th:last-of-type{
border-bottom:2px solid red
}
Het zoveelste kind / elk zoveelste kind (1/2)
*:nth-child(2n+4)
elk tweede element te beginnen
met het vierde element (dus: kinderen 4, 6, 8, 10, enz.)
td:nth-child(2n + 4) {
background:rgba(29, 53, 91, .3);
}
Let op: geen spatie tussen de „2” en de „n”!
Het zoveelste kind / elk zoveelste kind (2/2)
De n in an + b staat voor alle gehele getallen
≥ 0 (d.w.z. 0, 1, 2,…)
Als a of b nul is, kun je dat deel weglaten:
:nth-child(0n+7)
→
:nth-child(7)
:nth-child(3n+0)
→
:nth-child(3n)
Negatieve nummers zijn toegestaan (en soms nuttig):
:nth-child(2n-5)
identiek aan
:nth-child(2n+1)
:nth-child(-n+3)
alleen kinderen 1, 2 en 3
(!)
Even en oneven
E:nth-child(odd)
identiek aan nth-child(2n+1)
E:nth-child(even)
identiek aan nth-child(2n+2)
td:nth-child(odd){
background:orange;
}
Lege elementen
:empty
een leeg element (geen tekst, geen kinderen)
th:empty, td:empty{
background:rgba(253,143,149, .5);
}
Het doel van de huidige URL
:target
het element dat aangewezen wordt door de
huidige URL, bijv.:
http://example.org/doc#fragment
Uit de demo:
:target { border:4px gold solid }
Vinkjes
:checked
het element is een checkbox die aangevinkt is
input:checked + label {
font-weight: bold }
Andere selectors voor formulieren: :enabled, :disabled
:indeterminate
Oefening
Maak een document waar je met een klik kunt wisselen welke van
twee teksten zichtbaar is.
Hint: het kan met :target
en ~
, of met
:checked
en ~
(Wat is het voordeel van
:checked
over :target
in dit geval?)