En titt på CSS3-førstegangsstrukturvelger
En ting jeg elsker om CSS3 er det nye tillegget til selektorer som tillater oss å målrette elementer spesielt uten å stole på klasse, id eller andre elementattributt, og en som vi vil dekke her er følgende valg, : Første-av-typen.
De : Første-av-typen velgeren vil målrette det første barnet til det angitte elementet, for eksempel vil utsnittet nedenfor målrette mot det første h2 på nettsiden.
h2: førstegangs / * stildeklarasjon * /
De : Første-av-typen er også lik : N-te-i-typen (1), så heller enn å velge bare først av typen, kan vi videre velge den andre, den tredje og så videre. Følgende utdrag vil målrette mot det andre h2 element på nettsiden.
h2: nth-of-type (2) / * stildeklarasjon * /
: Første-av-typen” vs. “:første barn”
Det kan virke som disse to selektorene gjør det samme, men det er ikke tilfelle. La oss se følgende demonstrasjon:
La oss si at vi har fem avsnittelementer innpakket i a div, som dette:
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
Nå ønsker vi å velge det første avsnittet ved hjelp av :første barn velger.
p: første barn polstring: 5px 10px; border-radius: 2px; bakgrunn: # 8960a7; farge: #fff; border: 1px solid # 5b456a;
Og som vi har forventet, er første ledd vellykket valgt.
- : første barns demo
Men når vi legg til et annet element før første ledd, la oss si en h1, som utsnittet nedenfor:
Overskrift 1
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
Første ledd blir ikke valgt, som det første barnet inne i div er ikke lenger et avsnitt, men er nå en h1.
Så, dette er situasjonen hvor : Første-av-typen Velgeren kommer til å løse problemet.
p: first-of-type polstring: 5px 10px; border-radius: 2px; bakgrunn: # a8b700; farge: #fff; border: 1px solid # 597500;
- : Demo av første type
De “Siste” Selector
Hvor er det “først”, da vil det også være “siste”.
Omvendt av de to seleksjonene vi har diskutert ovenfor, er følgende to selektorer; de :siste barn og : Siste-of-type. De er i utgangspunktet de samme som de to ovenfor, bortsett fra at de målretter mot siste barn av det angitte elementet.
For eksempel vil denne brikken nedenfor målrette mot det siste avsnittet i div.
p: siste barn polstring: 5px 10px; border-radius: 2px; bakgrunn: # 8960a7; farge: #fff; border: 1px solid # 5b456a;
- : Siste barns demo
Og denne brikken vil også målrette mot det siste avsnittet i samme situasjon som vi har diskutert ovenfor; denne gangen blir fulgt direkte av et annet element.
p: siste-of-type polstring: 5px 10px; border-radius: 2px; bakgrunn: # a8b700; farge: #fff; border: 1px solid # 597500;
- : Siste versjon av demo
The Selectivizr
Som alle andre nye funksjoner i CSS3, støttes disse valgene ikke i gamle nettlesere, hovedsakelig Internet Explorer 6 til 8, med unntak for :første barn velg, som den er lagt til siden CSS2.1. Dens relative :siste barn ble bare lagt til i CSS3.
Så, hvis alle disse seleksjonene vi har nevnt her, er virkelig påkrevd for din webside, kan du bruke et JavaScript-bibliotek kalt Selectivizr å etterligne disse CSS3-selektorens funksjonalitet.
Selectivizr er avhengig av andre JavaScript-biblioteker for å kunne jobbe, for eksempel jQuery, Dojo, Prototype og MooTools; og ser fra sammenligningstabellen på den offisielle nettsiden, synes MooTools å kunne håndtere alle selektorer.
Så, la oss inkludere det sammen med Selectivizr, som følger:
Den betingede kommentaren ovenfor sikrer at disse bibliotene bare lastes inn i Internet Explorer 8 og under.
Til slutt kan du se demoen fra følgende koblinger, og den skal nå fungere både i moderne og gamle nettlesere (IE8 og under). Du kan også laste ned kildefilen for videre undersøkelse. Nyt.
- Demo
- Last ned kilde
