På denna sida beskrivs selektorer som används för att välja ut element i DOM-struktur. YUI använder de från CSS. (På nästa sida beskrivs hur man använder dessa selektorer med urvalsmetoder i YUI.)

Observera att denna beskrivning av selektorer inte är komplett! Den skrevs baserad på den dokumentation som gällde 2012-04-09, d.v.s. kommer bli föråldrad :-) (och jag kan ha missat några). Se referenser för komplett dokumentation av selektorer.

Sidans innehåll

Inledning

Selektorer används för att välja ut element i ett HTML-dokuemnts DOM-struktur.

Exempel

I första exempel nedan så väljs alla rubriker av nivå 2 och i andra exempel så väljs element med ID "output".

Y.all("h2");

Y.one("#output");

Strängar och citationstecken

Selektorer anges i strängar, d.v.s. måste inneslutas i dubbla eller enkla citationstecken (" eller '). I de fall där citationstecken ingår i strängar så kan man använda "den andra" för att innesluta strängen eller lägga till tecknet \ före tecknet i strängen, t.ex. "don't" eller 'don\'t'.

Kombinera selektorer

Precis som i CSS kan man kombinera selektorer för att urval ska bli så precist som möjligt, t.ex. "p.kommentar" - stycke av klassen kommentar - och "h2[id]:even" - alla rubriker av nivå 2 som har ett attribut id och är varannan (jämna - se nedan).

Till början på sida

CSS-selektorer

CSS-selektorer används för att välja ut element, d.v.s. man bör ha grundläggande kunskap om CSS för att kunna använda dem bäst.

Grundläggande

De grundläggande CSS-selektorerna har funnits med i CSS-standard sen början och är också de enklaste att förstå, d.v.s. är de mest vanligt förekommande.

Grundläggande CSS-selektorer
Selektor Element som väljs
"tagg" Alla element av taggen
".klassnamn" Alla element av klassen klassnamn
"#id" Elementet med id id
"*" Alla elementet

För att välja element med flera selektorer så separeras selektorerna med komma (se exempel nedan).

Exempel

Nedan väljs

  • alla taggar av typen H1
  • alla taggar av klassen "kod"
  • tagg med id "sidfot"
  • alla rubriker med taggen H1 och H2 samt taggar av klassen "rubrik"

Y.all("h1");

Y.all(".kod");

Y.one("#sidfot");

Y.all("h1, h2, .rubrik");

Relationsselektorer

CSS-selektorer möjliggör val av element med relation till varandra, bl.a. barn, ättlingar och syskon.

Relationsselektorer
Selektor Element som väljs
"selektor1 selektor2" Alla element selektor2 som är ättlingar till selektor1
"selektor1 > selektor2" Alla element selektor2 som är barn till selektor1, d.v.s. "direkta" ättlingar
"selektor1 + selektor2" Alla element selektor2 som är efterföljande syskon till selektor1
":first-child" Första barnelementet
Exempel

Nedan väljs

  • alla P-taggar som är ättlingar till DIV-taggar av klass "kod"
  • alla P-taggar som är barn (direkta ättlingar) till DIV-taggar av klass "kod"
  • alla P-taggar som är syskon till, och följer direkt efter, H2-tagg
  • alla P-taggar som är första barnet

Y.all("div.kod p");

Y.all("div.kod>p");

Y.all("h2+p");

Y.all("p:first-child");

Pseudoselektorer (övriga)

Ytterligare pseudoselektorer, utöver :first-child, är följande.

Pseudoselektorer (övriga)
Selektor Element som väljs
":link" Alla länkelement (<a>) som inte besökts
":visited" Alla länkelement (<a>) som besökts
":active" Element som aktivt, d.v.s. klickas på
":focus" Element som har fokus
":hover" Element som markör står över
":lang" Element märkta med språket lang
":first-line" Elements första rad (om text)
":first-letter" Elements första bokstav (om text)
":before" Element som markör står över
":after" Element som markör står över

Författaren behöver fortfarande förstå hur dessa selektorer är användbara...

Fler selektorer

CSS har även stöd för attribut, vilket jag valt att förklara i avsnittet Attribut nedan (bl.a. då jag inte börjat använda detta i CSS... förrän i denna underwebb :-)).

Till början på sida

Attribut

Även namn eller värde på attribut kan användas för att välja ut element.

Attributselektorer
Selektor Element som väljs
"[namn]" Element som har ett attribut med namnet namn
"[namn='varde']" Element som har ett attribut med namnet namn och värdet varde
"[namn^='varde']" Element som har ett attribut med namnet namn och ett värde som börjar med varde
"[namn$='varde']" Element som har ett attribut med namnet namn och ett värde som slutar med varde
"[namn*='varde']" Element som har ett attribut med namnet namn och ett värde som innehåller varde
"[namn~='varde']" Element som har ett attribut med namnet namn och ett värde som innehåller ordet varde
"[namn|='varde']" Element som har ett attribut med namnet namn och antingen värdet varde eller börjar med värdet varde följt av ett bindestreck
"[namn!='varde']" Element som har ett attribut med namnet namn men inte värdet varde

När det gäller selektor som väljer baserat på ord så måste värdet börja med värdet och följas av mellanslag, sluta med värdet och föregås av mellanslag eller både föregås och efterföljas av mellanslag. I första exempel nedan kommer alla attribut med ordet fet i sig väljas, d.v.s. med alla följande id:

I andra exemplet kommer kommer alla rubriker vars värde börjar på tal eller tal- att väljas, men inte talet.

Y.all("h2[id~='fet']");

Y.all("h2[id|='tal'");

Till början på sida

Större exempel

Nedan är länkar till större exempel.

Referenser

Nedan finns några böcker och webbsidor/-platser som jag använt för att skapa denna underwebb.