Istnieje taki selektor, a dokładniej pseudoklasa o nazwie :nth-child . Oto przykład jego użycia:

UL LI:nth-child(3n+3) ( kolor:#CCC; )

Co robi powyższy CSS? Wybiera co trzeci element listy punktowanej: jest to trzeci, szósty, dziewiąty, dwunasty i tak dalej. Zobaczmy dokładnie, jak działa to wyrażenie i co jeszcze można zrobić z :nth-child .

Wszystko zależy od tego, co znajduje się między nawiasami. Selektor :nth-child akceptuje dwa słowa kluczowe: parzyste i nieparzyste . To proste: nawet wybiera elementy parzyste, takie jak 2., 4., 6. itd., a nieparzyste elementy nieparzyste, takie jak 1., 3., 5. itd. d.

Jak widać z pierwszego przykładu, :nth-child również akceptuje wyrażenia jako parametr. W tym najprostsze równania, czyli same liczby. Jeśli umieścisz je w nawiasach, zostanie wybrany tylko jeden element o odpowiednim numerze. Na przykład, oto jak wybrać tylko piąty element:

UL LI:nth-child(5) ( kolor:#CCC; )

Wróćmy jednak do 3n+3 z pierwszego przykładu. Jak to działa i dlaczego wybierany jest co trzeci element? Cała sztuczka polega na zrozumieniu zmiennej n i zredukowanego równania algebraicznego. Pomyśl o n jako zbiorze liczb całkowitych liczonym od zera. Następnie uzupełnij równanie. Zatem 3n to 3×n , a całe równanie razem to (3×n)+3 . Teraz, zastępując liczby większe lub równe zero zamiast n, otrzymujemy:

  • (3 × 0) + 3 = 3 = trzeci element
  • (3 × 1) + 3 = 6 = szósty element
  • (3 × 2) + 3 = 9 = dziewiąty element itd.

A co z: n-tym dzieckiem(2n+1) ?

  • (2 × 0) + 1 = 1 = pierwszy element
  • (2×1) + 1 = 3 = 3 element
  • (2 × 2) + 1 = 5 = piąty element itd.

Tak, przestań! To to samo co dziwne. Może więc nie powinieneś używać tego wyrażenia? Ale czy w tym przypadku nie komplikujemy zbytnio naszego pierwszego przykładu? Co jeśli zamiast 3n+3 napiszemy 3n+0 lub jeszcze prostsze 3n ?

  • (3 × 0) = 0 = nic
  • (3 × 1) = 3 = 3 element
  • (3 × 2) = 6 = szósty element
  • (3 × 3) = 9 = dziewiąty element itd.

Jak widać, wynik jest taki sam, co oznacza, że ​​nie ma potrzeby +3 . Możemy używać ujemnych wartości n tak samo jak odejmowania w równaniach. Na przykład 4n-1:

  • (4 × 0) - 1 = -1 = nic
  • (4 × 1) - 1 = 3 = 3 element
  • (4 × 2) - 1 = 7 = 7. element itd.

Użycie -n może wydawać się dziwne - jeśli wynik końcowy jest ujemny, to żadne elementy nie zostaną uwzględnione w selekcji. Ale jeśli uzupełnisz równanie i ponownie sprawisz, że wynik będzie pozytywny, próbka okaże się dość interesująca: dzięki niej możesz uzyskać pierwsze n elementów, na przykład tak: -n + 3:

  • -0 + 3 = 3 = 3 element
  • –1 + 3 = 2 = drugi element
  • -2 + 3 = 1 = pierwszy element
  • -3 + 3 = 0 = nic itd.

SitePoint ma fajny przewodnik z ładnym napisem, który bezwstydnie opublikuję tutaj:

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 –

Obsługa przeglądarki

Selektor :nth-child jest jednym z niewielu selektorów CSS, który jest prawie w pełni obsługiwany w nowoczesne przeglądarki i absolutnie nie jest obsługiwany w IE, nawet w IE8. Więc jeśli chodzi o używanie go, a efektem końcowym jest progresywne ulepszanie, możesz go bezpiecznie używać do niektórych elementów typograficznych, takich jak kolorowanie wierszy tabeli. Nie należy go jednak stosować w poważniejszych przypadkach. Na przykład polegaj na nim w układzie witryny lub usuń prawy margines z co trzeciego bloku w siatce trzy na trzy, aby zmieściły się w rzędzie.

CSS n-ty-dziecko to pseudoklasa używana do wybierania elementów za pomocą wyrażenia liczbowego. Na pierwszy rzut oka jego składnia może wydawać się nieco zagmatwana.

W tym artykule przyjrzymy się:

  • różne sposoby użycia :nth-child ;
  • bardziej elastyczny :selektor typu n-ty;
  • i powiązane z nimi selektory :nth-last-child i :nth-last-of-type.

:n-ty-ostatni-typ

:nth-last-of-type wybiera elementy potomne, jeśli ich pozycja w dokumencie odpowiada wzorcowi opisanemu przez wyrażenie algebraiczne.

Selektor :nth-last-of-type wygląda mniej więcej tak:

li:n-te-dziecko(wyrażenie); ()

„Wyrażenie” może być reprezentowane przez słowa kluczowe parzyste lub nieparzyste , liczbę całkowitą lub formułę taką jak an+b , gdzie a i b są liczbami całkowitymi, dodatnimi lub ujemnymi.

Ponieważ pseudoklasa CSS n-ty element potomny może być użyty do wybrania zakresu różne elementy. Spójrzmy na kilka przykładów, aby było to jaśniejsze.

Mam lista punktowana 12 elementów. Zobaczmy, jak możemy użyć :nth-child do wybrania określonego elementu lub zestawu elementów we wzorcu:

  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum

Aby wybrać trzeci element listy, musisz podać li:nth-child(3) . Możesz użyć słowa kluczowego parzyste, aby zaznaczyć wszystkie elementy parzyste. I odwrotnie, możesz użyć :nth-child(odd), aby wybrać wszystkie elementy o nieparzystych numerach.

CSS n-te dziecko co trzecie - określ li:nth-child(3n) . Aby wybrać pierwsze cztery elementy, użyj li:nth-child(-n+4) . Aby wybrać wszystkie elementy oprócz pierwszych czterech, można użyć li:nth-child(n+5).

Wyrażenie an + b

Alternatywą dla słowa kluczowego nieparzyste jest użycie wyrażenia 2n+1 . Ale jak to działa?

Gdy wyrażenie an+b zawiera niezerowe wartości a i b , elementy podrzędne są dzielone na grupy. Jeśli wyrażenie ma wartość 2n+1 , elementy podrzędne są dzielone na dwie grupy. Każdy element w grupie ma przypisany indeks, począwszy od 1 . Odpowiednim elementem w każdej grupie jest numer indeksu b . W naszym przykładzie będzie to pierwszy element.

Jeśli wyrażenie ma wartość 3n+2 , elementy są grupowane według trzech elementów, a drugi element w każdej grupie jest zgodny z wyrażeniem.

Jeśli wartość b jest ujemna, pasującym elementem w grupie jest element o indeksie b . Ale jest liczone wstecz od indeksu 1 . W takim przypadku odpowiedni element będzie należeć nie do tego, ale do poprzedniej grupy.

Słowo kluczowe parzyste w CSS n-te dziecko może być wyrażone jako 2n . W tym przypadku nie mamy wartości dla b , więc wybierany jest każdy element grupy o indeksie a; 2n wybiera co drugi element, 3n wybiera co trzeci, 4n wybiera co czwarty i tak dalej.

Osobiście uważam, że koncepcja dzielenia elementów podrzędnych na grupy i znajdowania indeksu dopasowania dla każdej grupy jest bardzo myląca. Chociaż tak opisuje je specyfikacja selektorów CSS.

Preferuję koncepcję przeszukiwania każdego n-tego elementu - co drugi, trzeci, czwarty itd. I wtedy łatwiej mi sobie wyobrazić, że druga część wyrażenia to offset.

W przypadku 2n+1 czytam to wyrażenie w następujący sposób: „ Znajdź co drugi element i przesuń zaznaczenie w dół o 1».

Jeśli wyrażenie to 3n-5 , będzie wyglądać tak: " Znajdź co trzeci element i przesuń zaznaczenie w górę o 5».

Inne selektory: n-te dziecko

:nth-child ma odpowiadającą pseudoklasę :nth-last-child , co działa na odwrót.

li:nth-last-child(3n) zaczyna się od ostatniego element potomny i przetwarza je wstecz, dopasowując co trzeci element z końca listy.

Ta pseudoklasa jest mniej powszechna. Często jednak konieczne jest wybranie pierwszego lub ostatniego elementu podrzędnego. Można to zrobić za pomocą :nth-child(1) lub :nth-last-child(1) , ale ta metoda nie jest tak powszechna jak pseudoklasy :first-child i :last-child. Jednak tylko :first-child działa w IE8 , :last-child i :nth nie działają.

:n-ty typ

Co często mnie niepokoi, to że CSS n-ta pseudoklasa potomna sortuje elementy potomne według indeksu i nie bierze pod uwagę typu elementu.

Rozważmy następujący przykład.

lorem ipsum;

Aenean Commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;

Nunc sed turpis. Donec posuere vulputate arcu;

Jest sekcja z nagłówkiem, podtytułem i kilkoma akapitami. Chcę, aby pierwszy akapit wyróżniał się nieco większą czcionką 1,5 em.

Możesz spróbować użyć sekcji p:first-child code, ponieważ musisz dodać dodatkową stylizację do pierwszego akapitu w tej sekcji. Ale to nie zadziała, ponieważ pierwszym dzieckiem sekcji jest h1 . W takim przypadku należy użyć selektora :first-of-type.

istnieje cała linia selektory tego typu to :first-of-type , :last-of-type , :nth-of-type i :nth-last-of-type . Zachowują się jak :nth-child , ale wybierają n-te wystąpienia elementów określonego typu.

Opis

Pseudoklasa :nth-child służy do dodawania stylów do elementów na podstawie numeracji w drzewie elementów.

Składnia

element:nth-child(nieparzyste | parzyste |<число> | <выражение>) {...}

Wartości

nieparzyste Wszystkie nieparzyste numery elementów. parzyste Wszystkie parzyste numery pierwiastków. number Liczba porządkowa dziecka w stosunku do rodzica. Numeracja zaczyna się od 1, który będzie pierwszym elementem na liście. wyrażenie Określone jako an+b , gdzie a i b są liczbami całkowitymi, a n jest licznikiem, który automatycznie przyjmuje wartość 0, 1, 2...

Jeśli a wynosi zero, to nie jest zapisywane, a notacja jest redukowana do b . Jeśli b wynosi zero, to również jest pomijane, a wyrażenie jest zapisywane w postaci an . a i b mogą być liczbami ujemnymi, w takim przypadku znak plus zmienia się na minus, na przykład: 5n-1.

Używając ujemnych wartości dla a i b, niektóre wyniki mogą być również ujemne lub zerowe. Jednak na elementy mają wpływ tylko wartości dodatnie, ponieważ numeracja elementów zaczyna się od 1.

W tabeli. 1 pokazuje kilka możliwych wyrażeń i słowa kluczowe, a także wskazuje, które numery pozycji będą dotyczyć.

HTML5 CSS3 IE Cr Op Sa Fx

n-te dziecko

21342135 213621372138
Olej1634 627457
Złoto469 725647
Drewno773 793486
kamienie2334 8853103

W ten przykład Pseudoklasa :nth-child służy do zmiany stylu pierwszego wiersza tabeli, a także do kolorowania wszystkich parzystych wierszy (Rysunek 1).

Witam Cię na moim blogu. Chciałbym dziś napisać na temat tego, jak wybrać pierwszy element nadrzędny w css, ponieważ pozwala to na użycie mniejszej liczby klas stylów.

Pseudoklasy: pierwsze dziecko i pierwsze typu jaka jest różnica?

Aby odwołać się do pierwszego elementu z kontenera nadrzędnego w css, wymyślono dwie pseudoklasy. Od razu proponuję rozważyć wszystko na przykładzie, abyś zrozumiał:

To jest akapit

To jest akapit

To jest akapit

To jest akapit

To jest akapit

Powiedzmy, że mamy taki znacznik. Celem jest odwołanie się do pierwszego akapitu i odseparowanie go od pozostałych bez dodawania do niego klas. Można to zrobić w ten sposób:

#wrapper p:pierwsze dziecko(
Kolor czerwony;
}

Kolor pierwszego akapitu zmieni się na czerwony, możesz to sprawdzić.

#wrapper p:pierwszy typu(
kolor czerwony;
}

To samo się stanie. Więc jaka jest różnica? I polega na tym, że pseudoklasa first-of-type przeszukuje i znajduje pierwszy element rodzica, biorąc pod uwagę jego typ, a first-child nie szuka niczego - po prostu bierze pierwszy element rodzica, który natknie się i, jeśli jest to akapit, zastosuje do niego style. Jeśli nie, nic nie zostanie wybrane i zastosowane.

To jest akapit

To jest akapit

To jest akapit

To jest akapit

To jest akapit

Zastanówmy się teraz: czy w tym przypadku zadziałałby pierwszy typ? Tak, ponieważ uwzględnia typ elementu i wybierze pierwszy akapit, a nie pierwszy ze wszystkich elementów. Czy pierwsze dziecko będzie działać? Spróbuj. To nie zadziała, ponieważ akapit nie jest pierwszym elementem rodzica.

Osobiście nie od razu zrozumiałem różnicę między tymi pseudoklasami i przez chwilę się pomyliłem, ale teraz mam nadzieję, że wyjaśniłem to normalnie.

Kolejny ważny szczegół

Elementy są liczone od elementu nadrzędnego, więc jeśli określiłeś w ten sposób:

Li:pierwszy w typie(
…
}

Następnie zostaną wybrane pierwsze elementy listy w tagu body (czyli na całej stronie). W ten sposób na każdej liście pierwszy element będzie sformatowany inaczej.
Jeśli piszesz w ten sposób:

#sidebar li:first-of-type(
…
}

Wtedy zostaną wybrane tylko pierwsze pozycje list na pasku bocznym, czyli kolumna boczna na naszej stronie.

Używając różnych selektorów, o których pisałem, możesz dotrzeć do niemal każdego elementu na stronie internetowej. W tym artykule możesz przeczytać więcej o tym, jak pracować z pseudoklasą nth-child w css i daje to opcje w zakresie wyboru elementów.

Nawiasem mówiąc, zapomniałem wspomnieć o przeciwnych pseudoklasach - last-child (odpowiednio last-of-type). Pozwalają wybrać ostatni element z kontenera nadrzędnego.

Gdzie możesz zastosować w praktyce

Piszę o tych pseudoklasach, ponieważ są one aktywnie używane podczas układania z css. Tutaj masz na stronie na przykład blok podobnych postów lub komentarzy lub coś innego. I wpadłeś na pomysł, żeby jakoś ozdobić jego pierwszy element w szczególny sposób. A może ostatni. I tak, każdy może.

Musisz tylko znaleźć nazwę bloku, w którym przechowywany jest żądany element. Powiedzmy, że mamy do czynienia z popularnymi płytami. Kontener nadrzędny ma popularną klasę. Następnie piszemy tak:

Popularne li:first-of-type(
Górna wyściółka: 20px
}

Wszystko, pierwsza pozycja na liście otrzymała wcięcie z góry i możesz dodać co chcesz do stylów.

Oto kolejny przykład. Mam tylko trzy identyczne szare bloki w tagu ciała. Napiszmy tak.

Pseudoklasy mogą służyć do wybierania określonego elementu z listy. W tym samouczku omówimy pseudoklasę :nth-child, co możesz stworzyć za pomocą tej pseudoklasy i jak może być użyteczna. Pseudoklasa :nth-child pozwala wybrać grupę elementów o wspólnych właściwościach. Jest najczęściej używany do wybierania parzystych lub nieparzystych elementów z grupy. Często używa się go, aby stół wyglądał jak zebra, nadając różne kolory tła nieparzystym i parzystym rzędom.

tr:nth-child (nieparzyste) ( // kolor tła ) tr:nth-child (parzyste) ( // inny kolor tła )

Pseudoklasa :nth-child pozwala również podzielić elementy o wspólnej właściwości na grupy, a następnie wybrać określony element z każdej grupy przy użyciu następującej składni:

Tr:n-te-dziecko (an+b) ( )

Tutaj a określa liczbę elementów w grupie, oraz b określa, który element z grupy zostanie wybrany. Jeśli użyjesz wartości 2n+1, wówczas elementy zostaną podzielone na grupy po dwie i zostaną wybrane pierwsze elementy każdej grupy, czyli elementy o nieparzystej liczbie porządkowej. Jeśli użyjesz wartości 2n+2, wówczas elementy zostaną ponownie podzielone na grupy po dwie, ale teraz zostaną wybrane drugie elementy każdej grupy, czyli elementy o parzystym numerze seryjnym.

Jako przykład, aby zrozumieć pseudoklasę :nth-child, wybierzemy z nią co czwarty element, tj. czwarty, ósmy, dwunasty, szesnasty itd. Aby to zrobić, podzielimy elementy na grupy po cztery i następnie wybierz co czwarty element.

Tr:nth-child (4n+4 ) ( // styl co czwarty element )

Poniżej znajduje się lista dziesięciu elementów. Użyjemy pseudoklas :nth-child , :first-child i :last-child , aby wybrać elementy, które chcemy wyróżnić.

Używanie pseudoklasy CSS:nth-child do wybrania pojedynczego elementu

Ustawiając pseudoklasę :nth-child jako liczbę, możesz wybrać, do którego dziecka z grupy ma się odnosić:

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10

#selector_example li:nth-child (4) ( rozmiar czcionki: 150

Używanie pseudoklasy CSS:nth-child do zaznaczania wszystkich elementów z wyjątkiem pierwszej piątki

Jeśli ustawisz pseudoklasę :nth-child na wartość formularza n+ numer, możesz wybrać wszystkie elementy, zaczynając od elementu o tej liczbie porządkowej:

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10

#selector_example li:nth-child (n+6 ) ( rozmiar czcionki: 150 %; grubość czcionki:pogrubienie ; Zielony kolor ; )

Używanie pseudoklasy CSS:nth-child do wybierania tylko pierwszych pięciu elementów

Kiedy ustawimy pseudoklasę :nth-child na wartość ujemną n+ numer, wybieramy wszystkie elementy, które są przed elementem o tej liczbie porządkowej:

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10

#selector_example li:nth-child (-n+5 ) ( rozmiar czcionki: 150 %; grubość czcionki:pogrubienie ; Zielony kolor ; )

Używanie pseudoklasy CSS:nth-child do wybierania co trzeciego elementu

Pseudoklasa :nth-child może być użyta do wybrania sekwencji elementów poprzez określenie, ile elementów znajduje się w sekwencji i liczby porządkowej żądanego elementu. Jeśli ustawisz wartość 3n+1, zostanie wybrany co trzeci element, począwszy od pierwszego:

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10

#selector_example li:nth-child (3n+1 ) ( rozmiar czcionki: 150 %; grubość czcionki:pogrubienie ; Zielony kolor ; )

Używanie pseudoklasy CSS:nth-child do wybierania tylko nieparzystych elementów

Możesz ustawić pseudoklasę :nth-child na nieparzystą, aby wybrać wszystkie elementy z nieparzystymi liczbami porządkowymi. To znaczy elementy pierwszy, trzeci, piąty, siódmy, dziewiąty itd. Jest to bardzo przydatne przy ustawianiu kolorów dla sąsiednich wierszy tabeli.

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10

#selector_example li:nth-child (nieparzysty) ( rozmiar czcionki: 150 %; grubość czcionki:pogrubienie ; Zielony kolor ; )

Używanie pseudoklasy CSS:nth-child do wybierania tylko parzystych elementów

Ten przykład pokazuje to samo, co poprzedni, ale tym razem wszystkie elementy parzyste są zaznaczone. To znaczy drugi, czwarty, szósty, ósmy, dziesiąty itd. elementy:

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10

#selector_example li:nth-child (parzyste) ( rozmiar czcionki: 150 %; grubość czcionki:pogrubienie ; Zielony kolor ; )

Używanie CSS:first-child Pseudo-Class do wybrania pierwszego elementu

Kolejna pseudo-class:first-child wybierze pierwszy element:

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10

#selector_example li:first-child ( rozmiar czcionki: 150 %; grubość czcionki:pogrubienie ; Zielony kolor ; )

Używanie pseudoklasy CSS:last-child do wybrania ostatniego elementu

Oprócz pseudoklasy :first-child istnieje pseudoklasa :last-child, która wybierze ostatni element z grupy elementów:

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10

#selector_example li:last-child ( rozmiar czcionki: 150 %; grubość czcionki:pogrubienie ; Zielony kolor ; )

Używanie pseudo-klasy CSS:nth-last-child do wybrania przedostatniego elementu

Możesz także użyć pseudoklasy :nth-last-child, która łączy możliwości pseudoklas :last-child i :nth-child, aby rozpocząć liczenie elementów od końca. Oznacza to, że możesz wybrać element, licząc numery sekwencyjne z końca grupy, na przykład w grupie dziesięciu elementów, możesz wybrać drugi element z końca:

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10

#selector_example li:nth-last-child (2 ) ( rozmiar czcionki: 150 %; grubość czcionki:pogrubienie ; Zielony kolor ; )

Sprawdź pseudoklasę :nth-child z „