CSS-sequentie-elementnummer. HOE NDE-KIND WERKEN - WEB-normen

Pseudo-klasse: nth-kind wordt gebruikt om stijl toe te voegen aan elementen op basis van de elementenboom.

Aanduidingen

Waarden

oneven allemaal. verkoopnummers Elementen. Zelfs alle kennende elementen.<число> Serienummer dochterelement Met betrekking tot uw ouder. Nummering begint met 1, het is het eerste element in de lijst.<выражение> Geplaatst in de vorm van een ± B, waarbij A en B gehele getallen zijn, en n is de teller die automatisch de waarde 0, 1, 2 ...

Als A nul is, is het niet geschreven en wordt het record verlaagd tot b. Als B nul is, wordt het ook niet gespecificeerd en wordt de uitdrukking geschreven in de vorm van een. A en B kunnen in dit geval negatieve aantallen zijn, het plus teken verandert in minus, bijvoorbeeld: 5N-1.

Vanwege het gebruik van negatieve waarden A en B, kunnen sommige resultaten ook negatief zijn of gelijk zijn aan nul. Alleen positieve waarden zijn echter van invloed op de elementen vanwege het feit dat de nummering van elementen begint met 1.

In het tabblad. 1 toont enkele mogelijke uitdrukkingen en zoekwoorden, en ook aangegeven welke aantallen van de elementen betrokken zijn.

Het is toegestaan \u200b\u200bom twee pseudo-klassen te combineren: nth-kind om het bereik van elementen te selecteren. Hier worden alle elementen uit de tweede geselecteerd.

: Nth-kind (n + 2): nth-kind (-N + 5) (...)

Voorbeeld

IN dit voorbeeld Pseudo-Klasse: nth-kind wordt gebruikt om de stijl van de eerste regel van de tabel te veranderen, en om de kleur van alle onderdelen (fig. 1) te benadrukken.

Fig. 1. Toepassing van pseudoclass: NTH-kind aan tafelrijen

Specificatie

Elke specificatie passeert verschillende fasen van goedkeuring.

• Aanbeveling - Specificatie Goedgekeurd W3C en aanbevolen standaard.
• Kandidaat-aanbeveling ( Mogelijke aanbeveling ) - Een groep die verantwoordelijk is voor de norm is voldaan omdat het aan zijn doelen voldoet, maar de hulp van de ontwikkelingsgemeenschap om de norm te implementeren is vereist.
• Voorgestelde aanbeveling ( Aanbevolen aanbeveling) - In dit stadium wordt het document ingediend bij de W3C-adviesraad voor de definitieve goedkeuring.
• Werkontwerp (werkproject) is een meer volwassen versie van het ontwerp na bespreking en wijzigingen in overweging door de Gemeenschap.
• Editor "s-ontwerp ( Redactioneel Chernovik) - de ruwe versie van de standaard na het maken van editors door de projecteditor.
• DROOGTE ( Chernovik-specificatie) - de eerste zwarte versie van de standaard.

Stel dat er zo'n HTML is:

<p\u003eWeinig.</ P\u003e
<p\u003ePiggy.</ P\u003e
</ Sectie\u003e

p: NTH-kind (2) (Kleur: rood;)

p: nth-of-type (2) (kleur: rood;)

Hoewel, natuurlijk, in deze selectoren, is er een verschil.

Pseudo-klasse : Nth-kindbetekent een item kiezen als een:

1. Dit element is een paragraaf;
2. Dit is het tweede element van één ouder.

1. Selecteer de tweede alinea van één ouder.

<h1\u003eWoorden.</ H1\u003e.
<p\u003eWeinig.</ P\u003e
<p\u003ePiggy.</ P\u003e
</ Sectie\u003e

p: NTH-kind (2) (Kleur: rood;) / * werkt niet * /

p: nth-of-type (2) (kleur: rood;) /* Werkt nog steeds */

Als add

na

, vervolgens selector met: nth-kind zal niets kiezenomdat de paragraaf niet langer een tweede element is. Selector C: NTH-type zal blijven werken.

Het lijkt mij: nth-of-type is minder fragiel en nuttiger in het algemeen, ondanks dit: nth-kind blijft eenvoudig in het werk. Hoe vaak denk je dat "ik het tweede element in het ouderblok wil kiezen, als het een alinea is." Het is soms mogelijk, maar vaker vindt u "Kies de tweede alinea" of "Kies elke derde regel van de tabel", voor deze taken meer geschikt: nth-type (opnieuw, naar mijn mening).

De meeste situaties wanneer ik zeg: "Waarom mijn selector met: nth-kind werkt niet?" Het gebeurt omdat ik het monster van tags vergeet en de benodigde tag niet blijkt te zijn in een account dat je nodig hebt. Daarom is het bij het gebruik van: nth-kind beter om het uit de ouder te specificeren en niet te gebruiken bindend aan de tag.

dL: nth- kind (2) () / * Deze optie is beter dan * /
Dd: nth- kind (2) () / * dit * /

Maar natuurlijk hangt het allemaal af van de specifieke situatie.

Ondersteunbrowsers: nth-type behoorlijk fatsoenlijk ... Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, dat wil zeggen 9+. Ik zou zeggen als je diepere ondersteuning nodig hebt, gebruik dan JQuery (gebruik de selector en gebruik de klasse waar je het nodig hebt), maar JQuery is gestopt met ondersteunend: nth-of-type. Ik hoorde dat van voor zeldzaam gebruik, maar het lijkt me vreemd. Als je op deze manier wilt gaan, dan

Er is zo'n selector, meer nauwkeurig pseudo-klasse, genaamd: nth-kind. Hier is een voorbeeld van het gebruik ervan:

Ul li: nth-kind (3N + 3) (kleur: #CCC;)

Wat maakt de hierboven gegeven CSS-code? Hij kiest elk derde element in de gemarkeerde lijst: dit is de 3e, 6e, 9e, 12e, enz. Laten we eens kijken hoe het deze uitdrukking werkt en wat nog meer kan worden gedaan met: nth-kind.

Het hangt allemaal af van wat tussen haakjes ligt. Selector: Nth-Child duurt twee sleutelwoorden: even en oneven. Alles is eenvoudig: kiest zelfs keuze elementen, zoals de 2e, 4e, 6e, enz., En vreemd kiest vreemde elementen, zoals de 1e, 3e, 5e en t. D.

Zoals te zien is vanuit het eerste voorbeeld, accepteert het NTH-kind ook een uitdrukking als een parameter. Inclusief de eenvoudigste vergelijkingen, met andere woorden, alleen cijfers. Als u ze tussen haakjes plaatst, wordt slechts één item met het overeenkomstige nummer geselecteerd. Als u bijvoorbeeld alleen het vijfde element wilt kiezen:

Ul li: nth-kind (5) (kleur: #CCC;)

Laten we echter teruggaan naar 3 N + 3 vanuit het eerste voorbeeld. Hoe werkt het en waarom is elk derde element gekozen? De volledige focus in het begrijpen van de variabele N en de bovengenoemde algebraïsche vergelijking. Denk aan N, omdat het van nul begint met de set gehele getallen. Voeg dan de vergelijking toe. Dus 3N is 3 × N, en alle vergelijking samen is (3 × n) +3. Nu, substitueren in plaats van n, meer of gelijke nul, zullen we krijgen:

• (3 × 0) + 3 \u003d 3 \u003d 3e element
• (3 × 1) + 3 \u003d 6 \u003d 6e element
• (3 × 2) + 3 \u003d 9 \u003d 9e element, etc.

Hoe zit het met: nth-kind (2n + 1)?

• (2 × 0) + 1 \u003d 1 \u003d 1e element
• (2 × 1) + 1 \u003d 3 \u003d 3e element
• (2 × 2) + 1 \u003d 5 \u003d 5e element, etc.

Dus stop! Dit is hetzelfde als oneven. Dan moet je deze uitdrukking niet gebruiken? Maar in dit geval stegen we ons eerste voorbeeld niet bloot aan onnodige complicatie? Wat als in plaats van 3n + 3 we 3N + 0 of nog eenvoudiger 3n schrijven?

• (3 × 0) \u003d 0 \u003d niets
• (3 × 1) \u003d 3 \u003d 3e element
• (3 × 2) \u003d 6 \u003d 6e element
• (3 × 3) \u003d 9 \u003d 9e element, etc.

Dus, zoals je kunt zien, zal het resultaat hetzelfde blijken, wat betekent dat het geen behoefte is aan +3. We kunnen beide negatieve waarden van n gebruiken, met hetzelfde succes als aftrekking in vergelijkingen. Bijvoorbeeld 4n-1:

• (4 × 0) - 1 \u003d -1 \u003d niets
• (4 × 1) - 1 \u003d 3 \u003d 3e element
• (4 × 2) - 1 \u003d 7 \u003d 7e element, etc.

Gebruik -N lijkt misschien vreemd - immers, als het eindresultaat negatief is, dan zullen geen elementen in het monster vallen. Maar als u de vergelijking en opnieuw toevoegt om het resultaat positief te maken, is het monster vrij interessant: daarmee kunt u de eerste N-elementen krijgen, bijvoorbeeld als volgt: -N + 3:

• -0 + 3 \u003d 3 \u003d 3e element
• -1 + 3 \u003d 2 \u003d 2e element
• -2 + 3 \u003d 1 \u003d 1e element
• -3 + 3 \u003d 0 \u003d niets, etc.

Bij SitePoint is er een goed referentieboek met een schattig teken, dat ik hier schaamteloos publiceer:

n.	2N + 1.	4n + 1.	4n + 4.	4n.	5N-2	-N + 3.
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

Ondersteunende browsers

Selector: nth-kind - een van de weinige CSS-selectors, die bijna volledig wordt ondersteund moderne browsers En absoluut niet ondersteund in IE, zelfs in IE8. Daarom, als het gaat om gebruik, en het eindresultaat wordt gemaakt met behulp van de technologie van progressieve verbetering - kunt u het veilig gebruiken voor sommige van de compositorische elementen, zoals kleurrijke rijen van de tafel. Het is echter niet nodig om het in meer ernstige gevallen toe te passen. Vertrouwen er bijvoorbeeld op in de site-lay-out of verwijder het juiste veld van elk derde blok in het raster drie tot drie zodat ze op een rij komen.

In CSS is er een selector, om nauwkeuriger te zijn, de pseudo-selector genaamd NTH-kind. Een voorbeeld van het gebruik ervan:

Ul li: nth-kind (3N + 3) (kleur: #CCC;)

De bovenstaande CSS maakt het volgende: Toepasselijk stijl voor elk derde element van de niet-gemeten lijst. Namelijk dan de 3e, 6e, 9e, 12e, enz. Maar hoe werkt het? En ook welk voordeel kan ik verwijderen met het gebruik van het nde-kind?

De belangrijkste betekenis is om tussen haakjes uit te drukken. Nth-kind neemt er twee sleutelwoorden: zelfs. (zelfs) en vreemd. (vreemd). De betekenis van hen is absoluut duidelijk. Zelfs selecteert zelfs elementen (2, 4, 6), vreemd - oneven (1, 3, 5).

Zoals getoond in het bovenstaande voorbeeld, kan NTH-kind uitdrukkingen verwerken. Wat is de eenvoudigste mogelijke uitdrukking? Slechts een nummer. Als u een aantal beugels schrijft, wordt één enkel element geselecteerd. Kies bijvoorbeeld het vijfde lijstitem:

Ul li: nth-kind (5) (kleur: #CCC;)

Laten we terugkeren naar ons eerste voorbeeld waarin we de uitdrukking (3n + 3) hebben gebruikt. Hoe werkt hij? Waarom kiest hij elk derde element? De hele essentie in de variabele n. Het vergt de getalwaarden van nul en meer. Laten we kijken naar de lees meer:

(3 x 0) + 3 \u003d 3 \u003d 3-dwz element (3 x 1) + 3 \u003d 6 \u003d 6e element (3 x 2) + 3 \u003d 9 \u003d 9e element, enz.

Laten we nu de volgende uitdrukking proberen: nth-kind (2n + 1):

(2 x 0) + 1 \u003d 1 \u003d 1e element (2 x 1) + 1 \u003d 3 \u003d 3-dwz element (2 x 2) + 1 \u003d 5 \u003d 5e element, enz.

Als gevolg hiervan hebben ze ook hetzelfde als in het geval van oneven, dus het is niet nodig om zo'n uitdrukking te gebruiken. Bovendien kan ons eerste voorbeeld ook worden vereenvoudigd en gebruikt in plaats van de originele expressie (3N + 3), expressie (3n):

(3 x 0) + 0 \u003d 0 \u003d geen conformiteit (3 x 1) + 0 \u003d 3 \u003d 3-И И Илем (3 x 2) + 0 \u003d 6 \u003d 6e element, etc.

Zoals je kunt zien, is het resultaat hetzelfde, maar je hoeft niet "+3" te schrijven. We kunnen ook negatieve waarden in expressie gebruiken. Bijvoorbeeld 4n-1:

(4 x 0) - 1 \u003d -1 \u003d geen correspondentie (4 x 1) - 1 \u003d 3 \u003d 3-dwz element (4 x 2) - 1 \u003d 7 \u003d 7e element, enz.

Met behulp van negatieve waarden voor de coëfficiënt met N, ziet er iets vreemds uit, want in het geval van een negatief resultaat zal niet worden gevonden. U moet de uitdrukking voortdurend wijzigen om positieve elementen toe te voegen. Zoals het bleek, is deze aanpak erg handig om de eerste N-elementen te selecteren. Overweeg een voorbeeld van "-N + 3":

0 + 3 \u003d 3 \u003d 3i element -1 + 3 \u003d 2 \u003d 2e element -2 + 3 \u003d 1 \u003d 1e element -3 + 3 \u003d 0 \u003d geen match

Kruisvaart

nTH-kind is een van de meest ongelukkige attributen die volledig cross-browser zijn, met uitzondering van absolute nul in IE, zelfs de 8e versie. Daarom, als het gaat om het gebruik ervan, als het verwachte resultaat op de een of andere manier is visueel effect (bijvoorbeeld de kleurplaat van een bepaalde tabel), dan is dit een ideale aanpak. Maar het is waarschijnlijk niet nodig om het te gebruiken voor iets belangrijker, dat bijvoorbeeld van invloed kan zijn op de juistheid van de laag.

Natuurlijk, als u jQuery gebruikt, dan moet u zich hier geen zorgen over maken, omdat jQuery werkt, zelfs in Internet Explorer.

En tenslotte

Je kunt spelen met verschillende sectoruitdrukkingen op