Goede dag allemaal. Alexey Gulynin heeft contact opgenomen. In dit artikel vertel ik je graag wat er nieuw is selectors verschenen in CSS3. Ik zal meteen opmerken dat alle oude selectors (tag, class, id, pseudo-selectors) ook blijven bestaan. Met de komst van nieuwe selectors is het werk van een lay-outontwerper aanzienlijk vereenvoudigd, omdat het nu niet nodig is om het wiel opnieuw uit te vinden en een andere kruk uit te vinden om iets te doen. Laten we een HTML-pagina maken waarop we de nieuwe selectors gaan testen:
Met de eerste-kind-selector kunt u het eerste element opmaken. Om het duidelijker te maken een voorbeeld:
Ul li:eerste kind ( achtergrond: rood; )
Als u dit voorbeeld uitvoert, ziet u dat de achtergrond van het eerste lijstitem rood is geworden. Als het voor het eerste element kan worden ingesteld, moet het ook voor het laatste element gelden:
Met de laatste-kind-selector kunt u het laatste element opmaken. Voorbeeld:
Ul li:laatste kind ( achtergrond: groen; )
Nadat dit voorbeeld is uitgevoerd, wordt de achtergrond van het laatste item in de lijst groen.
Het mooie is dat er nu een selector is waarmee je elk willekeurig element een specifieke stijl kunt geven:
De nth-child() selector, in de parameters waarvan u het element moet doorgeven waarop u stijlen wilt toepassen:
Ul li:nth-child(2) ( achtergrond:geel; )
In dit geval wordt het tweede element van de lijst geel. Let op de syntaxis: er mag geen spatie staan na de :.
Met de komst van CSS3 werd het mogelijk om de markeringskleur te wijzigen. Wanneer we tekst op een pagina in de browser markeren, wordt deze meestal wit op een blauwe achtergrond weergegeven.
Met de ::selectieselector kunnen we deze kwestie naar onze smaak aanpassen:
::selectie ( achtergrond: roze; kleur: bruin; )
Typ dit voorbeeld en probeer iets te selecteren (de kleur van de selectie zou moeten veranderen).
U kunt nu elementen op de pagina filteren. Laten we zeggen dat we alle blokken moeten selecteren waarvan de ID begint met "te". Om dit te doen, moet je de volgende code schrijven:
Div ( achtergrond: #4c4c4c; )
De "^=" constructie betekent dat id (in ons geval) moet beginnen met "te". Voer dit voorbeeld uit en bekijk het resultaat. Met behulp van de volgende constructie kunt u elementen selecteren die eindigen op iets specifieks. Laten we zeggen dat we afbeeldingen op de pagina hebben in jpeg- en png-formaat. We willen een kader toevoegen aan alle afbeeldingen in png-formaat. Dit gebeurt als volgt.
Een selector is een onderdeel van een CSS-regel die de browser vertelt welk element (of elementen) op een webpagina worden opgemaakt.
De term selector kan verwijzen naar een eenvoudige selector, een samengestelde selector, een complexe selector of een lijst met selectors.
NAAR eenvoudige selecteurs erbij betrekken:
- type-kiezer
- universele keuzeschakelaar
- attribuutkiezers
- identificatie-selector
- klassenkiezer
- pseudo-klassen
| CSS-kiezer | Voorbeeld | Beschrijving | CSS |
|---|---|---|---|
| .klas | .mijnKlasse | Selecteert alle elementen met klasse myClass (class="myClass"). | 1 |
| #id | #voornaamst | Selecteert het element met id main (id=main). | 1 |
| * | Alle elementen selecteren. | 2 | |
| element | span | Alle elementen selecteren . | 1 |
| element, element | div, span | Alle elementen selecteren en alle elementen .
|
1 |
| [attribuut] | Selecteert alle elementen met een titelattribuut. | 2 | |
| [attribute=”waarde”] | Selecteert alle elementen met een titelattribuut waarvan de waarde exact overeenkomt met de waarde die is opgegeven in de selector (title="cost"). !} | 2 | |
| [attribuut~="waarde"] | Selecteert alle elementen met een titelattribuut waarvan de waarde (waar dan ook) de subtekenreeks (als een enkel woord) "one" (title="one and two) bevat"). !} | 2 | |
| [attribuut|="waarde"] | Selecteert alle elementen met een lang-attribuut waarvan de waarde begint met "ru". | 2 | |
| [attribuut^="waarde"] | A | Elk element selecteren met een href-attribuut waarvan de waarde begint met 'https'. | 3 |
| [attribuut$="waarde"] | Selecteert alle elementen met een src-attribuut waarvan de waarde eindigt op ".png" (src="some_img.png"). | 3 | |
| [attribuut*="waarde"] | Selecteert alle elementen met een titelattribuut waarvan de waarde (waar dan ook) de subtekenreeks bevat (als een enkel woord of een deel ervan) "one" (title="one and two"). !} | 3 |
Samengestelde selector is een reeks eenvoudige selectors die niet gescheiden zijn door combinatoren, dat wil zeggen dat de ene selector onmiddellijk wordt gevolgd door de volgende. Het selecteert een element dat overeenkomt met alle eenvoudige selectors die het bevat. De typeselector of universele selector die in een samengestelde selector is opgenomen, moet als eerste in deze reeks verschijnen. In een samengestelde selector is slechts één typeselector of universele selector toegestaan.
Span.className p.className1.className2#someId:hover
Complexe selector is een reeks selectors die gescheiden zijn door combinatoren.
Lijst met selecteurs zijn selectors gescheiden door komma's.
Combinatoren
Om eenvoudige CSS-selectors te combineren, worden combinators gebruikt om de relatie tussen eenvoudige selectors aan te geven. Er zijn verschillende combinators in CSS2, en één extra in CSS3. Als je ze gebruikt, veranderen ze de aard van de selector zelf.
Pseudo-klassen
Een pseudo-klasse is een eenvoudige selector die wordt gebruikt om iets te selecteren dat niet met andere selectors kan worden geselecteerd, of dat wel op een nogal moeilijke manier kan worden geselecteerd.
| Pseudo-klasse | Voorbeeld | Beschrijving | CSS |
|---|---|---|---|
| :link | een: koppeling | Selecteert alle niet-bezochte links. | 1 |
| : bezocht | een: bezocht | Selecteer alle bezochte links. | 1 |
| :actief | een:actief | Een actieve link selecteren. | 1 |
| :zweven | een: zweef | Een link selecteren wanneer u de muiscursor beweegt. | 1 |
| :focus | invoer: scherpstellen | Elementselectie , die centraal staat. | 2 |
| :eerste kind | p:eerste kind | Elk element selecteren Dat is het eerste kind van zijn ouder. |
2 |
| :lang(taal) | p:lang(nl) | Elk element selecteren Met een lang attribuut waarvan de waarde begint met "ru". |
2 |
| :eerste van het type | p: eerste van het type | Elk element selecteren Dat is het eerste van de elementen
|
3 |
| :laatste van het type | p:laatste type | Elk element selecteren Dat is het laatste van de elementen Het bovenliggende element. |
3 |
| :alleen-van-type | p:alleen-van-type | Elk element selecteren Dat is het enige element Het bovenliggende element. |
3 |
| :enig kind | p:enig kind | Elk element selecteren Dit is het enige onderliggende element van het bovenliggende element. |
3 |
| :nde-kind(n) | p:n-de-kind(2) | Elk element selecteren Het bovenliggende element. |
3 |
| :n-laatste-kind(n) | p:nde-laatste kind(2) | Elk element selecteren Dat is het tweede kind van het bovenliggende element, gerekend vanaf het laatste kind. |
3 |
| :n-van-type(n) | p:n-van-type(2) | Elk element selecteren Wat het tweede kind is Het bovenliggende element. |
3 |
| :n-de-laatste-van-type(n) | p:n-de-laatste-van-type(2) | Elk element selecteren Wat het tweede kind is Het bovenliggende element, gerekend vanaf het laatste onderliggende element. |
3 |
| 3 | |||
| :niet(kiezer) | :niet(p) | Alle elementen selecteren behalve element . |
3 |
Pseudo-elementen
Een pseudo-element is een virtueel element dat niet expliciet voorkomt in de documentelementboom. Pseudo-elementen worden gebruikt om delen van een element te selecteren die niet met andere selectors kunnen worden geselecteerd, en ook om delen van een element een stijl te geven in plaats van het hele element.
Beschrijving
Gerelateerde selectors zijn qua gedrag vergelijkbaar met aangrenzende selectors (notatie in de vorm E + F), maar in tegenstelling tot deze zijn stijlregels van toepassing op alle nabijgelegen elementen. Voor de selector h1~p wordt de stijl bijvoorbeeld op alle elementen toegepast
Staat achter de titel
. Tegelijkertijd En
Moet een gemeenschappelijke ouder hebben, dus als
Binnen plakken
Hier wordt de tekstkleur voor alle alinea's op rood gezet.
H1 ~ p (kleur: rood; )
Rubriek
Paragraaf 1
Paragraaf 2
Hier wordt de tekstkleur voor de eerste en derde alinea op rood gezet. De tweede alinea is niet opgemaakt omdat
En
Ze hebben geen gemeenschappelijke ouder.
H1 ~ p (kleur: rood; )
Rubriek
Paragraaf 1
Paragraaf 2
Paragraaf 3
Syntaxis
E ~ F (Beschrijving van stijlregels)
Het tilde-teken (~) wordt gebruikt om de stijl van verwante elementen te bepalen en wordt toegevoegd tussen de twee selectors E en F. Spaties rond de tilde zijn optioneel. Deze stijl wordt toegepast op element F als het dezelfde ouder heeft als element E en er onmiddellijk op volgt.
HTML5 CSS3 IE Cr Op Sa Fx
In dit voorbeeld zijn alle afbeeldingen in eerste instantie verborgen, maar worden ze weergegeven als u het formulierveld aanvinkt.
Laatste update: 21/04/2016
Het definiëren van een stijl begint met een selector. Bijvoorbeeld:
Div( breedte:50px; /* breedte */ hoogte:50px; /* hoogte */ achtergrondkleur:rood; /* achtergrondkleur */ marge: 10px; /* inspringing van andere elementen */ )
In dit geval is de selector div . Een aantal selectors nemen de naam over van de opgemaakte elementen, bijvoorbeeld div, p, h2, etc. Wanneer zo'n selector is gedefinieerd, wordt de stijl ervan toegepast op alle elementen die overeenkomen met deze selector. Dat wil zeggen dat de hierboven gedefinieerde stijl op alle elementen wordt toegepast
CSS-kiezers
Er zijn 3 div's op de pagina en ze hebben allemaal een stijl:
Klassen
Soms vereisen dezelfde elementen een verschillende styling. En in dit geval kunnen we klassen gebruiken.
Om een klassenkiezer in CSS te definiëren, wordt er een punt vóór de klassenaam geplaatst:
RedBlock(achtergrondkleur:rood; )
De klassenaam kan willekeurig zijn. In dit geval is de klassenaam bijvoorbeeld "redBlock". Het is echter toegestaan om letters, cijfers, koppeltekens en onderstrepingstekens in de klassenaam te gebruiken, en de klassenaam moet beginnen met een letter.
Het is ook de moeite waard om het geval van namen te overwegen: de namen "artikel" en "ARTIKEL" vertegenwoordigen verschillende klassen.
Zodra een klasse is gedefinieerd, kunnen we deze op een element toepassen met behulp van het class-attribuut. Bijvoorbeeld:
Laten we verschillende klassen definiëren en gebruiken:
CSS-klassen
Identificatiegegevens
Om elementen die uniek zijn op een webpagina te identificeren, worden identificaties gebruikt, die worden gedefinieerd met behulp van id-attributen. Een pagina kan bijvoorbeeld een hoofdblok of koptekst hebben:
Het definiëren van stijlen voor ID's is vergelijkbaar met het definiëren van klassen, maar in plaats van een punt wordt het hash-symbool # gebruikt:
Het is echter de moeite waard om op te merken dat identifiers meer te maken hebben met de structuur van de webpagina en minder met de stijl. Klassen worden gebruikt voor styling in plaats van identifiers.
Universele keuzeschakelaar
Naast tag-, class- en identifier-selectors kent CSS ook de zogenaamde universele keuzeschakelaar, wat staat voor het sterretje (*). Het past stijlen toe op alle elementen op de HTML-pagina:
*( achtergrondkleur: rood; )
Een groep selectors opmaken
Soms worden bepaalde stijlen toegepast op een reeks selectors. Laten we bijvoorbeeld zeggen dat we alle kopjes willen onderstrepen. In dit geval kunnen we de selectors van alle elementen weergeven, gescheiden door komma's:
CSS3
Selectoren
Selectiegroep
Selectoren
Selectiegroep
Wat tekst...
Een selectorgroep kan zowel tag-selectors als klasse- en ID-selectors bevatten, bijvoorbeeld:
H1, #header, .redBlock( kleur: rood; )
// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // toon mijn miniatuurgrootte?>Laten we het hebben over CSS-selectors. Naast de gebruikelijke toegang tot elementen via de klassenaam, id en de naam van html-tags, kunt u speciale combinaties en opdrachten gebruiken. Laten we ze in het artikel in meer detail bekijken. Sommige selectors worden door alle browsers ondersteund, andere alleen door de nieuwste browserversies.
1.
* - selecteert alle elementen
* ( marge: 0; opvulling: 0; ) Laten we beginnen met eenvoudige selectors en vervolgens kijken naar de complexere. Veel ontwikkelaars gebruiken het om de marge- en opvulwaarden van alle elementen opnieuw in te stellen. Op het eerste gezicht is dit handig, maar het is nog steeds beter om dit niet in productiecode te doen. Deze CSS-selector is te zwaar voor de browser.
Het kan ook worden gebruikt om alle kinderen van een bepaalde container onder de aandacht te brengen.
#container * ( rand: 1px effen zwart; )
In dit geval worden alle onderliggende elementen van het #container-blok geselecteerd. Probeer er geen misbruik van te maken.
Verenigbaarheid
- IE6+
- Firefox
- Chroom
- Safari
- Opera
2. #X
#container (breedte: 960px; marge: auto; )Het hekje vóór de CSS-selector markeert het element met id="container" . Het is heel eenvoudig, maar wees voorzichtig bij het gebruik van de id.
Vraag uzelf af: moet ik absoluut markeren op ID?
id-waarden binden de stijl stevig aan het element en laten hergebruik niet toe. Het verdient de voorkeur om class=""-klassen, tagnamen of zelfs pseudo-klassen te gebruiken.
Verenigbaarheid
- IE6+
- Firefox
- Chroom
- Safari
- Opera
3.X
.fout (kleur: rood; )Dit is een CSS-selector van klasse X. Het verschil tussen id en klasse is dat één klasse meerdere elementen op een pagina kan bezitten. Gebruik klassen als u een stijl op meerdere elementen van hetzelfde type wilt toepassen. Wanneer u id gebruikt, moet u voor elk afzonderlijk element een stijl schrijven.
Verenigbaarheid
- IE6+
- Firefox
- Chroom
- Safari
- Chroom
4. XY
li a ( tekstversiering: geen; )De CSS-selector voor onderliggende elementen is de meest voorkomende. Als u elementen van een bepaald type uit veel onderliggende elementen moet selecteren, gebruikt u deze selector. U moet bijvoorbeeld alle links in het li-element markeren. Gebruik in dit geval deze selector.
Je moet geen CSS-selectors maken zoals X Y Z A B.fout . Vraag jezelf altijd af of het nodig is om zo’n omslachtige CSS-selector te schrijven om een bepaald element te markeren.
Verenigbaarheid
- IE6+
- Firefox
- Chroom
- Safari
- Chroom
5.X
a ( kleur: rood; ) ul ( marge-links: 0; )Wat als u alle elementen van een bepaald type op een pagina wilt bedekken? Houd het simpel: gebruik een CSS-typekiezer. Als je alle ongeordende lijsten moet markeren, gebruik dan ul()
Verenigbaarheid
- IE6+
- Firefox
- Chroom
- Safari
- Opera
We gebruiken de pseudo-class:link om alle links te markeren waarop nog niet is geklikt.
Als we een bepaalde stijl moeten toepassen op reeds bezochte links, gebruiken we de pseudo-klasse: bezocht.
Verenigbaarheid
- IE7+
- Firefox
- Chroom
- Safari
- Opera
7. X+J
ul + p ( kleur: rood; )Selecteert het volgende element. Hij zal kiezen alleen een element van het type Y dat direct na het X-element komt. In het voorbeeld is de tekst van de eerste alinea na elke ul rood.
Verenigbaarheid
- IE7+
- Firefox
- Chroom
- Safari
- Chroom
8. X>J
div#container > ul (rand: 1pxsolidblack; )Het verschil tussen standaard X Y en X > Y is dat de betreffende CSS-selector alleen directe onderliggende elementen selecteert. Neem bijvoorbeeld de volgende code.
De CSS-selector #container > ul selecteert alleen uls die directe onderliggende elementen zijn van de div met id =container . Er worden bijvoorbeeld geen uls geselecteerd die kinderen zijn van de eerste li's.
Daarom kunt u prestatievoordelen behalen door deze CSS-selector te gebruiken. In feite wordt dit vooral aanbevolen bij het werken met jQuery of andere bibliotheken die elementen selecteren op basis van CSS-selectorregels.
Verenigbaarheid
- IE7+
- Firefox
- Chroom
- Safari
- Opera
9. X~J
ul ~ p ( kleur: rood; )Deze CSS-selector lijkt sterk op X+Y, maar is minder beperkend. Als u ul + p gebruikt, wordt alleen het eerste element na X geselecteerd. In dit geval worden alle p-elementen die naar ul gaan geselecteerd.
Verenigbaarheid
- IE7+
- Firefox
- Chroom
- Safari
- Opera
10. X
een(kleur:groen;)CSS-selectors kunnen ook attributen gebruiken. In dit voorbeeld hebben we bijvoorbeeld alle links geselecteerd die het title-attribuut hebben. Andere links blijven onaangetast.
Verenigbaarheid
- IE7+
- Firefox
- Chroom
- Safari
- Opera
11. X
a ( kleur: #ffde00; )Houd er rekening mee dat er citaten zijn. Vergeet niet hetzelfde te doen in jQuery en andere JavaScript-bibliotheken waarin elementen worden geselecteerd met behulp van CSS-selectors. Gebruik waar mogelijk altijd CSS3 CSS-selectors.
Een goede regel, maar te streng. Wat te doen als de link niet rechtstreeks naar yandex.ru leidt, maar bijvoorbeeld naar http://yandex.ru/page1? In deze gevallen kunnen we reguliere expressies gebruiken.
Verenigbaarheid
- IE7+
- Firefox
- Chroom
- Safari
- Chroom
12. X
een (kleur: #1f6053; )Dit is wat we nodig hebben. Een ster geeft aan dat de waarde die u zoekt, moet verschijnen ergens in het attribuut. Dus de CSS-selector dekt yandex.ru, http://yandex.ru/een pagina enz.
Verenigbaarheid
- IE7+
- Firefox
- Chroom
- Safari
- Opera
13. X
a ( achtergrond: url(pad/naar/extern/icon.png) no-repeat; opvulling-links: 10px; )Heb je je ooit afgevraagd hoe sommige websites een klein pictogram naast externe links kunnen weergeven? Ik weet zeker dat je ze al eerder hebt gezien, ze zijn zeer gedenkwaardig.
"^" is het meest gebruikte teken in reguliere expressies. Het wordt gebruikt om het begin van een lijn te markeren. Als we alle tags willen omvatten waarvan de href begint met http, moeten we de bovenstaande CSS-selector gebruiken.
Houd er rekening mee dat we niet zoeken naar "http://". Dit is niet correct omdat er geen rekening wordt gehouden met adressen die beginnen met https://
Wat als we alleen een stijl willen instellen voor links die naar een foto leiden? Moet zoeken einde lijnen.
Verenigbaarheid
- IE7+
- Firefox
- Safari
- Opera
14. X
een(kleur:rood;)Opnieuw gebruiken we het reguliere expressieteken "$" om het einde van de regel aan te geven. In deze zoeken we naar links die verwijzen naar jpg-bestanden, of naar URL's met ".jpg" aan het einde.
Verenigbaarheid
- IE7+
- Firefox
- Safari
- Opera
15. X
a( kleur: rood; )Hoe kunnen we nu een CSS-selector schrijven die links naar alle soorten afbeeldingen markeert? We zouden bijvoorbeeld zo kunnen schrijven:
A, een, een, een ( kleur: rood; )
Maar dit zijn aambeien en ineffectief. Een andere mogelijke oplossing is het gebruik van aangepaste attributen. Waarom voegen we niet ons eigen data-filetype attribuut toe aan elke link?
EEN (kleur: rood; )
Verenigbaarheid
- IE7+
- Firefox
- Safari
- Opera
16. X
a ( kleur: rood; ) a ( rand: 1px effen zwart; )Hier is iets speciaals. Niet iedereen kent deze CSS-selector. Met de tilde (~) kunt u een specifiek attribuut uit een door komma's gescheiden lijst met attributen markeren.
We kunnen bijvoorbeeld ons eigen data-info-attribuut instellen, dat verschillende trefwoorden bevat, gescheiden door spaties. We kunnen dus aangeven dat de link extern is en naar een afbeelding linkt.
"Klik op mij
Hier is de HTML-code aanwezig, laten we nu de stijlen schrijven.
Niet slecht, toch?
Verenigbaarheid
- IE7+
- Firefox
- Safari
- Opera
17. X: gecontroleerd
invoer:aangevinkt (rand:1pxsolidblack; )Deze pseudoklasse benadrukt alleen UI-elementen, zoals een keuzerondje of selectievakje. Bovendien degenen die gemarkeerd/geselecteerd zijn. Heel eenvoudig.
Verenigbaarheid
- IE9+
- Firefox
- Safari
- Opera
18. X: na
De :before en :after pseudo-klassen zijn erg cool. Het lijkt erop dat er elke dag nieuwe manieren zijn om ze effectief te gebruiken. Ze genereren eenvoudigweg inhoud rond het geselecteerde element.
Veel mensen raakten bekend met deze pseudo-klassen tijdens het werken met de clear-fix-hack.
Clearfix:after ( inhoud: ""; weergave: blok; helder: beide; zichtbaarheid: verborgen; lettergrootte: 0; hoogte: 0; ) .clearfix ( *weergave: inline-blok; _height: 1%; )
Dit hacken gebruikt :after om een spatie toe te voegen na een element en te voorkomen dat het wordt omhuld.
Volgens de CSS3-specificatie moet u twee dubbele punten (::) gebruiken. U kunt echter een enkele dubbele punt gebruiken voor compatibiliteit.
Verenigbaarheid
- IE8+
- Firefox
- Safari
- Opera
19. X: zweven
div:hover ( achtergrond: #e3e3e3; )Wilt u een stijl op een element toepassen als u er met de muis overheen gaat? Dan is deze CSS-selector iets voor jou.
Houd er rekening mee dat oudere versies van Internet Explorer alleen van toepassing zijn: hover op links.
Deze CSS-selector wordt vaak gebruikt om een rand onder aan links te plaatsen wanneer er met de muis overheen wordt bewogen.
A: hover (rand-onder: 1pxsolidblack; )
rand-onder: 1px effen zwart; ziet er beter uit dan tekstversiering: onderstrepen;
Verenigbaarheid
- IE6+ (In IE6: hover moet op de link worden toegepast)
- Firefox
- Safari
- Opera
20. X:niet(kiezer)
div:not(#container) ( kleur: blauw; )De negatie-pseudoklasse kan erg nuttig zijn. Laten we zeggen dat ik alle div's wil selecteren, behalve degene met id = container . De bovenstaande code zal dit afhandelen!
Of als ik alle elementen behalve p.
*:niet(p) ( kleur: groen; )
Verenigbaarheid
- IE9+
- Firefox
- Safari
- Opera
21. X::pseudoelement
We kunnen pseudo-elementen gebruiken om fragmenten van elementen op te maken, zoals de eerste regel of de eerste letter. Houd er rekening mee dat ze moeten worden toegepast op elementen op blokniveau om van kracht te worden.
Een pseudo-element wordt aangegeven met twee dubbele punten: ::
Selecteer de eerste letter in de alinea
P::eerste letter ( float: links; lettergrootte: 2em; lettergrootte: vet; lettertypefamilie: cursief; opvulling rechts:2px; )
Deze code selecteert alle alinea's en selecteert op zijn beurt de eerste letters ervan en past deze stijl daarop toe.
Selecteer de eerste regel in een alinea
P::eerste regel ( lettertypegewicht: vet; lettergrootte: 1,2em; )
Op dezelfde manier stylen we met ::first-line de eerste regel in een alinea.
“Voor compatibiliteit met bestaande stijlbladen moet de browser de eerdere pseudo-elementaanduidingen met één dubbele punt begrijpen die zijn geïntroduceerd in CSS 1, 2 (:eerste regel, :eerste letter, :before en:after). Deze compatibiliteit is niet toegestaan voor nieuwe pseudo-elementen die in deze specificatie zijn geïntroduceerd"
Verenigbaarheid
- IE6+
- Firefox
- Safari
- Opera
22. X:n-de kind(n)
li:nth-child(3) ( kleur: rood; )Voorheen konden we bijvoorbeeld niet het derde onderliggende element selecteren? nde-kind lost dit op!
Merk op dat nth-child een geheel getal als parameter neemt, maar niet begint vanaf 0. Als u het tweede lijstitem wilt selecteren, gebruikt u li:nth-child(2) .
We kunnen zelfs elk vierde element van de lijst selecteren door simpelweg (0)li:nth-child(4n)(/0) te schrijven.
Verenigbaarheid
- IE9+
- Firefox 3.5+
- Safari
23. X:n-laatste kind(n)
li:nth-laatste-kind(2) ( kleur: rood; )Wat als je een enorme lijst met elementen in ul hebt en je het derde element vanaf het einde moet selecteren? In plaats van li:nth-child(397) te schrijven, kunt u nth-last-child gebruiken.
Deze methode is vrijwel identiek aan die hierboven, maar begint vanaf het einde.
Verenigbaarheid
- IE9+
- Firefox 3.5+
- Safari
- Opera
24. X:n-van-type(n)
ul:n-van-type(3) (rand: 1pxsolidblack; )Het komt voor dat u niet een onderliggend element moet selecteren, maar een element van een bepaald type.
Stel je voor dat er vijf ongeordende lijsten op een pagina staan. . Als je alleen de derde ul wilt stylen die geen unieke ID heeft, moet je nth-of-type gebruiken.
Verenigbaarheid
- IE9+
- Firefox 3.5+
- Safari
25. X:n-de-laatste-van-type(n)
ul:n-de-laatste-van-type(3) (rand: 1pxsolidblack; )We kunnen ook n-de-laatste-van-type gebruiken, waarbij we de elementen vanaf het einde tellen.
Verenigbaarheid
- IE9+
- Firefox 3.5+
- Safari
- Opera
26. X: eerste kind
ul li:eerste kind ( border-top: geen; )Deze pseudoklasse selecteert het eerste onderliggende element. Vaak gebruikt om randen van het eerste en laatste element van een lijst te verwijderen.
Verenigbaarheid
- IE7+
- Firefox
- Safari
- Opera
27. X: laatste kind
ul > li:laatste kind ( kleur: groen; ):first-child:last-child selecteert daarentegen het laatste onderliggende element.
Verenigbaarheid
- IE9 + (Ja, ja, IE8 ondersteunt:first-child , maar ondersteunt niet:last-child . Hallo Microsoft!)
- Firefox
- Safari
- Opera
28. X:enig kind
div p:enig kind ( kleur: rood; )Je ziet deze pseudo-klasse niet vaak, maar hij bestaat toch.
Hiermee kunt u elementen selecteren die de enige onderliggende elementen zijn. Pas bijvoorbeeld de bovenstaande stijl toe op deze html-code:
Eén paragraaf.
Twee paragrafen
Twee paragrafen
Alleen p van de eerste div wordt geselecteerd omdat dit het enige onderliggende element is.
Verenigbaarheid
- IE9+
- Firefox
- Safari
- Opera
29. X: alleen-van-type
Een zeer interessante pseudo-klasse. Het beïnvloedt elementen die geen buren hebben binnen het bovenliggende element. Laten we als voorbeeld een ul selecteren met slechts één element in de lijst.
De enige oplossing is om only-of-type te gebruiken.
Ul > li:only-of-type ( lettertypegewicht: vet; )
Verenigbaarheid
- IE9+
- Firefox 3.5+
- Safari
- Opera
30. X: eerste van het type
first-of-type selecteert het eerste element van het opgegeven type. Laten we een voorbeeld bekijken om het beter te begrijpen.
Paragraaf
- Punt 1
- Punt 2
- Punt 3
- Punt 4
Probeer nu te begrijpen hoe u punt 2 kunt benadrukken.
Oplossing 1
Ul:first-of-type > li:nth-child(2) ( lettertypegewicht: vet; )
Oplossing 2
P + ul li:laatste kind ( lettertypegewicht: vet; )
Oplossing 3
Ul:eerste-van-type li:n-laatste-kind(1) ( lettertypegewicht: vet; )
Verenigbaarheid
- IE9+
- Firefox 3.5+
- Safari
- Opera
