!

Dette materialet blir ikke lenger vedlikeholdt. Du vil finne oppdatert materiale på siden: http://borres.hiof.no/wep/

CSS
Selectors
Børre Stenseth
CSS >CSS selektorer

CSS selectors

Hva
Identifisering av elementer

HTML5 og CSS3 gir oss nye og svært fleksible måter å spesifisere stiler på og verktøy for å manipulere stiler. Nøkkelen til dette er selektorer. Du kan teste hvor bra din nettleser har implementert CSS3 på denne siden: CSS3 Selectors Test [1] .

Neden for finner du en list over de viktigste måten å identifisere elementer.
Merk paralellen til XPATH-uttrykk i en del av disse selektorene. Se modulen XPath .

Enkle selektorer

Form Forklaring
e alle elementer av typen e
#c elementet med id c
.c alle elementer med klasse (class) c
e.c alle e-elementer med klasse (class) c
* alle elementer

Attributt selektorer

Form Forklaring
e[a] alle e-elementer med en a attribute
e[a="b"] alle e-elementer med en a attribute med verdien b
e[a~="b"] alle e-elementer med en a attribute der verdien b forekommer i "whitespace-separated list" av verdier
e[a^="b"] alle e-elementer med en a attribute der verdien begynner med b
e[a$="b"] alle e-elementer med en a attribute der verdien ender med b
e[a*="b"] alle e-elementer med en a attribute som inneholder b
e[a|="b"] alle e-elementer med en a attribute som første verdi i en - separert liste

Pseudo klasser

Form Forklaring
e:link når e er en link som ikke er besøkt eller aktiv eller mouseover eller fokusert
e:visited når e er en link som er besøkt
e:active når e er en link som er aktiv
e:hover når e er en link som musa beveger seg over
e:focus når e er en link eller et form element som har fokus som resultata av en tastet tab
e:target når e er fragment i den refererende URI'en
e:lang(no) når e er et element i språket "no".

Kombinasjoner

Form Forklaring
e > f når f er direkte barn av e
e + f når f kommer rett etter e
e ~ f når f kommer et eller annet sted etter e
e:not(s) elementer av typen e som ikke matcher selectore s

Strukturelle selektorer

Form Forklaring
e:first-child første e-element som er barn av foreldre elementet
e:first-of-type første e-element i blandt søsken
e:last-child siste e-element som er barn av foreldre elementet
e:last-of-type siste e-element i blandt søsken
e:only-child det eneste e-elementet som er barn av foreldre elementet
e:only-of-type det eneste e-elementet som er barn av foreldre elementet
e:empty et e-element som ikke har andre barn enn et text element
e:nth-child(n) et e-element som er n'te barn av foreldre-elementet
e:nth-last-child(n) et e-element som er n'te barn av foreldre-elementet, talt bakfra
e:nth-of-type(n) det n'te e-elementet
e:nth-last-of-type(n) det n'te e-elementet, talt bakfra
e:root e-elementet som er dokument roten, html

Form og pseudoelementer

Form Forklaring
e:enabled et ui-element e som er enabled
e:disabled et ui-element e som er disabled
e:checked et ui-element e som er checked
e:first-line den første formaterte linja i et e-element
e:first-letter den første formaterte bokstaven i et e-element
e:before generert innhold foran et e-element
e:after generert innhold etter et e-element

Javascript

Når vi skal programmere Javascript mot en DOM har vi fra tidligere disse metodene for å identifisere elementer

  • getElementsByTagName(e)
  • getElementById(i)

I HTML5 med CSS3 har vi i tillegg fått disse:

  • getElementsByClassName(c)
  • querySelectorAll(s)
  • querySelector(s)

getElementsByClassName(c) finner elementer der c kan være en tekst i en blank-separart list av klassenavn. De to siste, querySelectorAll(s) og querySelector(s), finner henholdsvis en liste av elementer eller det første i lista som identifiseres med selektoren s.

Alle disse metodene er implementert for alle elementer, ikke bare document. Det betyr at de arbeider ut fra det vi i XPATH-terminologi vil kalle "current node". Dette gir oss et kraftig verktøy for å identifisere og modifisere elementer på en vevside.

Merk også at vi kan programmere Javascript mot et stilsett. Det betyr at vi kan endre innholdet i et stilsett fra Javascript. Også her bruker vi selektorer til å identifisere stilregler.

Mer om Javascript og stiler i modulen Javascript og CSS .

Referanser
  1. CSS3 Selectors Test CSS3.info www.css3.info/selectors-test/ 14-10-2011
  1. Selectors Level 3 W3C www.w3.org/TR/selectors/ 14-10-2011
  1. Learn HTML5 and CSS Rendera rendera.heroku.com/ 14-10-2011
Vedlikehold

B.Stenseth, november 2011

( Velkommen ) CSS >CSS selektorer ( Litt CSS )