Czy można wybrać, powiedzmy, co czwarty element w zestawie elementów?
Np .: Mam 16 <div>
elementów ... Mógłbym napisać coś takiego.
div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
czy jest na to lepszy sposób?
css
css-selectors
Derek Adair
źródło
źródło
Odpowiedzi:
Jak sama nazwa wskazuje, pozwala konstruować wyrażenie arytmetyczne przy użyciu zmiennej oprócz stałych liczb. Możesz wykonywać dodawanie ( ), odejmowanie ( ) i mnożenie współczynników ( gdzie jest liczbą całkowitą, w tym liczbami dodatnimi, liczbami ujemnymi i zerem).
:nth-child()
n
+
-
an
a
Oto jak przepisałbyś powyższą listę selektorów:
Aby uzyskać wyjaśnienie działania tych wyrażeń arytmetycznych, zobacz moją odpowiedź na to pytanie , a także specyfikację .
Zauważ, że ta odpowiedź zakłada, że wszystkie elementy podrzędne w obrębie tego samego elementu nadrzędnego są tego samego typu elementu,
div
. Jeśli masz inne elementy różnych typów, takie jakh1
lubp
, musisz użyć:nth-of-type()
zamiast,:nth-child()
aby upewnić się, że liczysz tylkodiv
elementy:W przypadku wszystkich innych elementów (klas, atrybutów lub dowolnej ich kombinacji), gdy szukasz n-tego dziecka pasującego do dowolnego selektora, nie będziesz w stanie tego zrobić za pomocą czystego selektora CSS. Zobacz moją odpowiedź na to pytanie .
Nawiasem mówiąc, nie ma dużej różnicy między 4n a 4n + 4 w odniesieniu do
:nth-child()
. Jeśli użyjeszn
zmiennej, zacznie ona liczyć od 0. Oto, co pasowałby każdy selektor::nth-child(4n)
:nth-child(4n+4)
Jak widać, oba selektory będą pasować do tych samych elementów, co powyżej. W tym przypadku nie ma różnicy.
źródło
tr td:nth-child(4)
. Zwróć uwagę na brak n w nawiasachZobacz: http://css-tricks.com/how-nth-child-works/
źródło
Spróbuj tego
źródło
Potrzebujesz poprawnego argumentu dla
nth-child
pseudoklasy.Argument powinien być w formie
an + b
, aby dopasować każdego a th dziecko począwszy od b.Zarówno
a
ib
są opcjonalne całkowitymi i oba mogą być zerowa lub ujemna.a
wynosi zero, nie ma klauzuli „co th dziecko” .a
jest ujemne, dopasowanie jest wykonywane wstecz odb
.b
jest zero lub ujemne, wówczas możliwe jest zapisanie równoważnego wyrażenia przy użyciu dodatniegob
np.4n+0
Jest takie samo jak4n+4
. Podobnie4n-1
jest jak4n+3
.Przykłady:
Wybierz co czwarte dziecko (4, 8, 12, ...)
Wybierz co czwarte dziecko, zaczynając od 1 (1, 5, 9, ...)
Pokaż fragment kodu
Wybierz co trzecie i czwarte dziecko z grup 4-osobowych (3 i 4, 7 i 8, 11 i 12, ...)
Pokaż fragment kodu
Wybierz pierwsze 4 pozycje (4, 3, 2, 1)
Pokaż fragment kodu
źródło