Slik bruker du nye CSS3 Selectors - dummies

CSS3 støtter flere nye selektorer med interessante nye evner som du bør bli kjent med. Du kan bruke disse nye evnene til å forbedre sidene på enda bedre måter enn før.

Attributvalg

Du kan nå bruke en stil til et element med en bestemt attributtverdi. For eksempel tar input-taggen forskjellige former, alt avhengig av typeattributtet. Hvis du bruker en enkelt stil til inngangselementet, blir denne stilen brukt på mange forskjellige typer elementer: avmerkingsbokser, tekstfelt og radioknapper. Ved å bruke det nye attributtsyntaxen, kan du bruke en stil på hvilket som helst innspillingselement:

input [type = "text"] {bakgrunnsfarge: #CCCCFF;}

Du kan bruke stilen med eller uten en tagtype, men det er mulig å få uventede bivirkninger hvis du velger et ekstremt vanlig attributt.

ikke

Det er ganger du vil ha et inverst utvalg. For eksempel, tenk at du ønsket å bruke en stil på alle avsnittene som ikke er medlemmer av spesialklassen:

p: ikke (. Spesial) {border: 1px solid rød;}

nth-barn

Med nth-barnvelgeren kan du velge ett eller flere elementer i en gruppe. Basisversjonen bruker en numerisk inngang:

#myList> li: nth-child (1) {border: 1px solid blue;}

Dette lar deg bruke en stil til den første av en gruppe elementer. I eksemplet er det en liste med fire elementer. Stilen brukes til listepostene, ikke listen.

Den numeriske verdien kan faktisk være en formel, som en + b. Hvis du elsker algebra (og hvem ikke?), Kan du velge alle likeverdige elementer som dette:

#myList> li: nth-child (2n) {border: 1px solid blue;}

En lignende formel kan brukes til å velge utallige barn.

#myList> li: nth-child (2n + 1) {border: 1px solid blue;}

Du kan bruke dette formelsystemet til å få alle slags grupperinger, men de fleste trenger bare et bestemt element, eller alle jevne eller odde rader. CSS3 leverer snarveisord, jevn og merkelig, så du trenger ikke å gjøre det ved hjelp av matte:

#myList> li: nth-child (even) {color: white; bakgrunnsfarge: rød;}

Søkeordet lar deg velge det siste elementet fra en gruppe. Det er noen flere variasjoner av denne utvalgsteknikken:

• : nte-siste-barn (N) : Fungerer akkurat som nth-barn, unntatt teller fra slutten av gruppen av elementer i stedet for begynnelse.

• : nth-of-type (N) : Denne velgeren fungerer som nth-barn, bortsett fra at den filtrerer til en bestemt type og ignorerer elementer som ikke er av samme type av elementet.

• siste barn : Dette (naturlig nok) velger det siste barnelementet.

• siste nitt av typen (N) : Fungerer som nth-of-type, men fra slutten av gruppen.

• første barn : Griper til det første elementet (teknisk var dette tilgjengelig i CSS2, men det ble sjelden brukt).

Disse utvalgsverktøyene støttes fullt ut i alle de nyeste nettleserne. Men som de vanligvis brukes bare for å forbedre lesbarheten, bør det være trygt å bruke dem. Eldre nettlesere kan bare hoppe over stilen.

Andre nye pseudoklasser

Pseudoklasser lar deg spesifisere stiler basert på tilstanden til et element. Moderne CSS støtter en rekke nye pseudoklasser:

• : svever : Den: peverklassen har vært en del av CSS fra begynnelsen, men det ble offisielt definert bare for taggen. Nå kan peverskiftet brukes til ethvert element. Hvis musen er over et element, har elementet statusen aktivert. Merk at mobilenheter ikke alltid støtter fordi posisjonen til pekeenheten ikke er kjent før elementet er aktivert.

• : fokus : : Fokus pseudoklassen aktiveres når et element er klar til å motta tastaturinngang.

• : aktiv : Et skjemaelement er aktivt når det brukes for tiden: for eksempel når en knapp er trykket men ennå ikke utgitt. Mobile enheter hopper ofte direkte til aktiv modus uten å gå gjennom hover-modus. Dette kan være et viktig design hensyn når du bruker tilstand for styling.

Statens pseudoklasser støttes fullt ut av alle moderne nettlesere bortsett fra IE-familien til nettlesere. Det er begrenset, men buggy støtte i selv tidlig versjoner av IE.