Zrozumienie selektora CSS :nth-child()

Podobnie jak wszystkie selektory CSS, możesz użyć :nth-child(), aby zidentyfikować elementy na stronie internetowej i zastosować do nich style. Ale ten selektor pozwala zawęzić zestaw rodzeństwa na podstawie ich względnej pozycji.

Selektor oferuje zarówno podstawowe opcje słów kluczowych, jak i zaawansowaną składnię opartą na wzorcach, aby spełnić różne wymagania. Możesz wybierać spośród prostych selekcji, które są zgodne z powtarzającymi się wzorcami lub stosować skomplikowane specyfikacje w celu spełnienia konkretnych wymagań.

Składnia selektora :nth-child()

Jako selektor pseudoklasy CSS, składnia :nth-child() odróżnia się od innych selektorów, przyjmując argument, który służy jako wzorzec do identyfikacji elementów w grupie elementów rodzeństwa.

 :nth-child(args) {
    /*...*/
} 

Główny nacisk kładziony jest na zawartość zawartą w nawiasach, która określa konkretny podzbiór elementów do wyboru.

Używanie wartości słów kluczowych w typowych przypadkach

Ten konkretny selektor został zaprojektowany do pracy z dwoma różnymi wartościami słów kluczowych, a mianowicie “nieparzyste” i “parzyste”. Wartości te okazują się bardzo skuteczne, jeśli chodzi o wdrażanie alternatywnej stylizacji wierszy w tabeli.

Proste wyliczenie służy jako przykład okoliczności, w których można zastosować te oznaczenia słów kluczowych:

 <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ol> 

Wykorzystując selektor :nth-child(odd) , można zmodyfikować odcień każdego kolejnego elementu listy z nieparzystym indeksem:

 :nth-child(odd) {
    color: red;
} 

Elementy są numerowane począwszy od 1, w taki sposób, że początkowy element będzie wyświetlany w kolorze czerwonym, a następnie trzeci element, a następnie każdy kolejny trzeci element.

Notacja funkcjonalna dla większej elastyczności

Można użyć pojedynczej dodatniej liczby całkowitej, aby wybrać konkretny komponent, stosując go w następujący sposób:

 li:nth-child(4) {
    color: red;
} 

W tym przypadku selektor dotyczy wyłącznie czwartego elementu na podanej liście:

Ten konkretny przypadek składni odnosi się do wybierania elementów na podstawie określonego wzorca i należy do szerszej kategorii składni funkcjonalnych, które wykonują tę funkcję.

 :nth-child(An\\+B) {
    /*...*/
} 

W tym konkretnym zapisie oznaczamy przez “A” przyrost lub rozmiar kroku, który oznacza częstotliwość, z jaką selektor przesuwa się w celu wybrania kolejnego elementu. Dzięki takiemu podejściu można zdecydować się na wybieranie elementów w regularnych odstępach czasu, takich jak co drugi element lub co trzeci element itd.I odwrotnie, “B” reprezentuje punkt początkowy, od którego rozpoczyna się selekcja.

Weźmy na przykład argument 3n\\+1:

 li:nth-child(3n\\+1) {
    color: red;
} 

Rozpoczynając proces selekcji od początkowego elementu, będzie on następnie kontynuowany przez pominięcie dwóch elementów i przejście do następnego kolejnego elementu:

Porównaj to z wyrażeniem 3n\\+2:

 li:nth-child(3n\\+2) {
    color:red;
} 

Zaktualizowany kod rozpocznie wybieranie elementów od drugiego elementu listy zamiast od pierwszego, nadal trzymając się wzorca wybierania co trzeciego elementu.

Innym interesującym przykładem jest :nth-child(n\\+3):

 li:nth-child(n\\+3) {
    color: red;
} 

Podana instrukcja dotyczy wyboru serii elementów, przy czym rozpoczyna się od trzeciego elementu i trwa do końca. Wynikowa sekwencja powinna mieć postać przedstawioną poniżej:

Można również zastosować proces odejmowania w celu uzyskania określonych wyników.

 li:nth-child(3n-1) {
    color: red;
} 

Podany przykład odbiega od konwencjonalnych praktyk, inicjując proces selekcji od indeksu ujemnego, co skutkuje wyborem drugiego elementu w sekwencji, a następnie piątego i kolejnych terminów:

The of Składnia

Pseudoklasa :nth-child() pozwala na wykorzystanie słowa kluczowego “of” wraz z selektorem, służącym jako argument w nawiasach. Stosując tę składnię, można ograniczyć zakres elementów, z których podstawowy wzorzec może wybierać, zwiększając w ten sposób specyficzność i precyzję procesu selekcji.

Rozważmy scenariusz, w którym znaczniki są zawiłe w porównaniu do wersji początkowej:

 <ol>
    <li class="old">Item 1</li>
    <li class="new">Item 2</li>
    <li class="new">Item 3</li>
    <li class="old">Item 4</li>
    <li class="new">Item 5</li>
    <li class="new">Item 6</li>
    <li class="new">Item 7</li>
</ol> 

Aby celować w elementy z określoną klasą i wybrać co drugi element w tej grupie za pomocą CSS, można użyć pseudoklasy “:nth-child” w połączeniu z żądanym selektorem klasy. Pozwala to na precyzyjny wybór i modyfikację określonych elementów w oparciu o ich pozycję w sekwencji dopasowanych elementów.

 .new {
    font-weight: bold;
}

li:nth-child(even of.new) {
    color: red;
} 

Zwróć uwagę na fakt, że tylko nieparzyste pogrubione wpisy są wyświetlane na czerwono:

Dodatkowo, zastanów się nad różnicą między li.new:nth-child(even) i :target , selektorami, które odpowiednio celują w .new elementy, gdy są parzyste lub zawierają element podrzędny o identyfikatorze “moredetails”, jak pokazano w naszym poprzednim przykładzie. Pierwszy z nich dotyczy instancji 2 i 6 na przedstawionej ilustracji.

Praca z selektorem :nth-child()

Wykorzystanie selektora :nth-child() umożliwia generowanie charakterystycznej estetyki poprzez implementację żywych odcieni w treści strony internetowej, obejmujących akcentowanie poszczególnych wierszy i kolumn w tabelarycznych strukturach danych. Co więcej, integracja tego selektora z dodatkowymi selektorami CSS ułatwia tworzenie skomplikowanych schematów wizualnych i konfiguracji poprzez wykorzystanie ich połączonych możliwości.