W3C

Bert Bos | Selectors (Future CSS, Utrecht 2013)

Selectors

(Flexible box)

Cascading Style Sheets

(Terug naar inhoudsopgave)


  

Principes

Voor CSS, een document is altijd een boom­struc­tuur met twee soorten, geordende knopen:

  1. elementen
  2. Unicode tekst (alleen als blad)

Elementen hebben nul of meer, ongeordende attributen en een optionele unieke naam (ID)

De klasse van een element is niet een afzonderlijke eigenschap, maar één van de attributen kan in aanmerking komen voor een verkorte notatie, de klasse-selector.

Voorbeelden van bomen

Voorbeelden:

Binnen en buiten de boom

CSS heeft een handvol pseudo-elementen omdat typografisch interessante componenten niet altijd overeenkomen met een element in het document: ::first-line voor de eerste regel, :first-letter voor de eerste letter of lettercombinatie, ::before een stukje tekst dat niet het document voorkomt, maar hoort bij een bepaalde stijl, enz.

De semantiek van hyperlinks wordt misschien ooit nog eens in CSS zelf gedefinieerd, in plaats van te vertrouwen op geprogrammeerde informatie over documentformaten in de CSS-implementatie. XLink and HLink zijn pogingen geweest om deze semantiek in XML te definiëren, maar ze zijn niet wijd genoeg toegepast dat CSS er op kan vertrouwen. Opera gebruikt eigenschappen in CSS ('-o-link' en andere), maar dat is tot nu toe geen standaard.

Nieuw in niveau 3

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:

Negatieve nummers zijn toegestaan (en soms nuttig):

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 }

Als je van een document een link volgt naar ergens middenin een ander document, kan dat laatste document m.b.v. ':target' een opvallende stijl geven aan het element waar je naartoe gesprongen bent.

Je kunt natuurlijk ook binnen een document springen, bijvoorbeeld van een inhoudsopgave naar een paragraaf. En het is bruikbaar voor een aantal trucs: tabbladen, stijlveranderingen na een klik…

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?)