Een kijkje in CSS3 First-of-Type structurele kiezer
Een ding dat ik zo leuk vind aan CSS3, is de nieuwe toevoeging van selectors waarmee we elementen specifiek kunnen richten zonder te vertrouwen op de klasse, ID kaart of een ander elementattribuut, en een dat we hier zullen behandelen is de volgende selector, : Eerste-van-type.
De : Eerste-van-type selector richt het eerste kind van het opgegeven element, het onderstaande fragment is bijvoorbeeld het eerste h2 op de webpagina.
h2: first-of-type / * stijlverklaring * /
De : Eerste-van-type is ook gelijk aan : N-of-type (1), dus in plaats van alleen de eerste van het type, kunnen we verder de tweede, de derde enzovoort selecteren. Het volgende fragment target de tweede h2 element op de webpagina.
h2: nth-of-type (2) / * stijlverklaring * /
: Eerste-van-type” vs. “:eerstgeborene”
Het lijkt misschien alsof deze twee selectors hetzelfde doen, maar dat is niet het geval. Laten we de volgende demonstratie zien:
Laten we zeggen dat we vijf alinea-elementen hebben verpakt in een div, zoals dit:
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
Nu willen we de eerste alinea selecteren met behulp van de :eerstgeborene keuzeschakelaar.
p: first-child padding: 5px 10px; grensradius: 2px; achtergrond: # 8960a7; kleur: #fff; rand: 1px vast # 5b456a;
En zoals we hadden verwacht, is de eerste alinea succesvol geselecteerd.
- : demo voor het eerste kind
Echter, wanneer we voeg eerder een ander element toe de eerste alinea, laten we zeggen een h1, zoals het onderstaande fragment:
Koptekst 1
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
de eerste alinea zal niet worden geselecteerd, als het eerste kind in de div is niet langer een alinea, maar is nu een h1.
Dus dit is de situatie waarin het : Eerste-van-type selector komt om het probleem op te lossen.
p: first-of-type opvulling: 5px 10px; grensradius: 2px; achtergrond: # a8b700; kleur: #fff; rand: 1px vast # 597500;
- : eerste-type demo
De “Laatste” keuzeschakelaar
Waar is de “eerste”, dan zal er ook de “laatste”.
Het omgekeerde van de twee selectors die we hierboven hebben besproken, zijn de volgende twee selectors; de :laatste kind en de : Last-of-type. Ze zijn in principe hetzelfde als de bovenstaande twee, behalve dat ze zich richten op de laatste kind van het opgegeven element.
Dit fragment hieronder zal bijvoorbeeld de laatste alinea binnen de div targeten.
p: last-kind opvulling: 5px 10px; grensradius: 2px; achtergrond: # 8960a7; kleur: #fff; rand: 1px vast # 5b456a;
- : last-child Demo
En dit fragment zal ook de laatste alinea targeten in dezelfde situatie als we hierboven hebben besproken; deze keer de wordt direct gevolgd door een ander element.
p: last-of-type opvulling: 5px 10px; grensradius: 2px; achtergrond: # a8b700; kleur: #fff; rand: 1px vast # 597500;
- : last-of-type demo
De Selectivizr
Net als elke andere nieuwe functie in CSS3 worden deze selectors voornamelijk niet ondersteund in oude browsers Internet Explorer 6 tot 8, met een uitzondering voor de :eerstgeborene selector, zoals deze is toegevoegd sinds CSS2.1. Zijn familielid de :laatste kind is alleen toegevoegd in CSS3.
Dus als al deze selectors die we hier hebben genoemd echt nodig zijn voor uw webite, kunt u een JavaScript-bibliotheek gebruiken Selectivizr om de functionaliteit van die CSS3-selector te emuleren.
De Selectivizr is afhankelijk van andere JavaScript-bibliotheken om te werken, zoals jQuery, Dojo, Prototype en MooTools; en aan de vergelijkingstabel op de officiële website te zien, lijkt MooTools alle selectors aan te kunnen.
Laten we het dus samen met de Selectivizr als volgt opnemen:
De voorwaardelijke opmerking hierboven zorgt ervoor dat deze bibliotheken alleen in Internet Explorer 8 en lager worden geladen.
Ten slotte kunt u de demo bekijken via de volgende koppelingen en deze zou nu zowel in moderne als oude browsers moeten werken (IE8 en lager). U kunt ook het bronbestand downloaden voor verder onderzoek. Genieten.
- demonstratie
- Download de bron
