Ściąga selektorów CSS: tester na żywo, nth-child, ::before | We.Inc
Wpisz dowolny selektor CSS i zobacz, które elementy przykładowej strony pasują, razem z jego specyficznością. Zawiera wszystkie grupy selektorów, kalkulator formuły nth-child, przepisy na ::before i ::after oraz :has().
Selektory mówią CSS, do których elementów stosuje się reguła. Podstawowe to selektor typu (p), klasy (.card), ID (#main), atrybutu ([type=email]), kombinatory (potomek: spacja, dziecko >, rodzeństwo + i ~), pseudoklasy, takie jak :hover i :nth-child(2n), oraz pseudoelementy, takie jak ::before. Wpisz selektor poniżej, aby zobaczyć, co dopasowuje.
Selektory, na których opiera się większość arkuszy stylów
Selektor
Dopasowuje
Specyficzność
Każdy element p
.card
Elementy z klasą card
Element o id main
nav a
a w dowolnym miejscu wewnątrz nav
ul > li
li będące bezpośrednimi dziećmi ul
a:hover
Link pod kursorem
Czytanie tabeli selektorów daje tylko tyle. Tester poniżej uruchamia Twój selektor w silniku samej przeglądarki na małej przykładowej stronie, podświetla każdy dopasowany element, wyjaśnia błędne wpisy i oblicza specyficzność. Kalkulator pod nim odpowiada na odwieczne pytanie, które elementy naprawdę wybiera 3n+1.
Wpisz selektor w testerze albo kliknij jeden z przykładów, aby go wczytać.
Dopasowane elementy na przykładowej stronie się podświetlają, a licznik aktualizuje się w trakcie pisania.
Odczytaj specyficzność jako trzy liczby: ID, potem klasy i podobne, potem typy elementów.
Użyj kalkulatora nth-child, aby przetestować dowolną formułę An+B na liście do 30 elementów.
Stylizuj klasami, a nie ID. Klasa utrzymuje niską specyficzność, więc późniejsze reguły i klasy narzędziowe nadal mogą ją nadpisać.
Do pierścieni fokusu używaj :focus-visible zamiast :focus. Pokazuje pierścień użytkownikom klawiatury bez migania przy każdym kliknięciu myszą.
::before i ::after potrzebują właściwości content, choćby pustego ciągu, inaczej w ogóle nie zostaną wygenerowane.
Długie listy selektorów skracaj, owijając je w :is(), albo w :where(), gdy mają mieć zerową specyficzność.
Najczęściej zadawane pytania
Czym różni się nth-child od nth-of-type?
:nth-child(2) liczy wszystkie elementy rodzeństwa, a potem sprawdza, czy drugi z nich pasuje też do reszty selektora. :nth-of-type(2) liczy tylko rodzeństwo z tym samym znacznikiem. Dlatego p:nth-child(2) nic nie dopasuje, jeśli drugie dziecko to h2, a p:nth-of-type(2) nadal znajdzie drugi akapit.
Czym różni się ::before od :before?
To ten sam pseudoelement. Podwójny dwukropek wprowadzono, aby odróżnić pseudoelementy od pseudoklas, a przeglądarki dla zgodności wstecznej nadal akceptują pojedynczy dwukropek przy czterech starszych (before, after, first-line, first-letter). W nowym kodzie pisz podwójny dwukropek.
Co robi :has()?
:has() dopasowuje element na podstawie tego, co zawiera lub co po nim następuje, na przykład .card:has(img) stylizuje karty zawierające obraz, a label:has(+ input:invalid) stylizuje etykietę przed błędnie wypełnionym polem. Obsługują go wszystkie obecne główne przeglądarki, a Firefox dodał go jako ostatni, pod koniec 2023 roku.
Jak oblicza się specyficzność?
Policz trzy rzeczy: selektory ID; klasy, selektory atrybutów i pseudoklasy; a potem selektory typu i pseudoelementy. Porównuj od lewej, więc jedno ID wygrywa z dowolną liczbą klas. :where() nic nie dodaje, a :is(), :not() i :has() przyjmują wynik swojego najbardziej specyficznego argumentu. Style inline i !important stoją ponad nimi wszystkimi.
Dlaczego mój styl :hover nie działa na telefonach?
Ekrany dotykowe nie mają stanu hover, więc przeglądarki albo go pomijają, albo stosują na chwilę po dotknięciu. Owiń style tylko dla hover w @media (hover: hover) i upewnij się, że wszystko, co pojawia się po najechaniu, jest też dostępne dotykiem i z klawiatury.
Jak przeglądarka czyta selektor
Przeglądarki dopasowują selektory od prawej do lewej. Dla nav ul li a silnik zaczyna od każdego linku na stronie, a potem idzie w górę, szukając li, ul i nav. Dlatego najważniejsza dla szybkości jest skrajnie prawa część, zwana selektorem kluczowym, choć na zwykłych stronach szybkość selektorów rzadko jest realnym problemem.
Przecinek tworzy listę selektorów, czyli po prostu kilka selektorów współdzielących jedną regułę. Jeśli którykolwiek z nich jest nieprawidłowy, cała reguła jest odrzucana, z wyjątkiem wnętrza :is() i :where(), które wybaczają nieprawidłowe wpisy.
Pseudoklasy a pseudoelementy
Pseudoklasa, zapisywana z jednym dwukropkiem, wybiera istniejący element w określonym stanie lub pozycji: :hover, :checked, :first-child, :empty. Pseudoelement, zapisywany z dwoma dwukropkami, tworzy lub wskazuje część, która nie jest osobnym elementem w HTML: ::before, ::placeholder, ::selection, ::marker.
W jednym selektorze złożonym dozwolony jest tylko jeden pseudoelement i musi on stać na końcu. Treść dodana przez ::before i ::after jest zwykle odczytywana przez czytniki ekranu, ale nie da się jej zaznaczyć ani skopiować, więc nie umieszczaj tam kluczowych informacji.
Jak trzymać specyficzność w ryzach
Większość walk o specyficzność zaczyna się, gdy ID albo długi łańcuch zagnieżdżonych selektorów wygrywa z późniejszą, prostszą regułą. Płaskie nazwy klas, najwyżej na jeden lub dwa poziomy, sprawiają, że każdą regułę łatwo nadpisać.
Warstwy kaskady (@layer) dają kolejne narzędzie: reguły w późniejszej warstwie wygrywają z regułami we wcześniejszej bez względu na specyficzność. Resety i style zewnętrzne mogą trafić do niskiej warstwy, żeby Twoje własne klasy zawsze wygrywały.
Selektory podstawowe i atrybutów
Selektory proste
Selektor
Przykład
Dopasowuje
Każdy element
Typ
Wszystkie elementy button
Klasa
.price
class zawiera price
ID
id to checkout
Atrybut obecny
[disabled]
Ma ten atrybut w ogóle
Dokładna wartość
[type="email"]
Wartość to dokładnie email
Zaczyna się od
[href^="https"]
Wartość zaczyna się od https
Kończy się na
[href$=".pdf"]
Wartość kończy się na .pdf
Zawiera
[class*="btn"]
Wartość zawiera btn w dowolnym miejscu
Słowo na liście
[rel~="noopener"]
Lista rozdzielona spacjami zawiera to słowo
Prefiks języka
[lang|="en"]
en albo en- i dowolny ciąg dalej
Bez rozróżniania wielkości liter
[href$=".PDF" i]
Dopasowuje .pdf, .PDF i tak dalej
Kombinatory
Relacje między elementami
Kombinator
Przykład
Dopasowuje
Potomek (spacja)
nav a
a na dowolnej głębokości wewnątrz nav
Dziecko >
ul > li
li bezpośrednio wewnątrz ul
Następny element rodzeństwa +
p bezpośrednio po h2
Dalsze rodzeństwo ~
Każdy p po h2 z tym samym rodzicem
Lista selektorów ,
Którykolwiek z nich
Pseudoklasy
Stan, struktura i logika
Pseudoklasa
Dopasowuje
:hover
Element pod kursorem myszy
:focus
Ma fokus z klawiatury lub ustawiony programowo
:focus-visible
Ma fokus, a przeglądarka uznaje, że pierścień powinien być widoczny
:focus-within
On sam lub jego potomek ma fokus
:active
Właśnie wciskany
:visited
Już odwiedzony link (ograniczone style ze względu na prywatność)
:checked / :disabled / :required
Kontrolki formularza w danym stanie
:valid / :invalid / :user-invalid
Stany walidacji formularza; user-invalid czeka na interakcję
:placeholder-shown
Pole, które właśnie pokazuje placeholder
:first-child / :last-child / :only-child
Pozycja wśród rodzeństwa
:nth-child(An+B) / :nth-last-child()
Pozycja według formuły, liczona wśród całego rodzeństwa
:nth-of-type() / :first-of-type
Pozycja liczona tylko wśród tego samego znacznika
:empty
Brak dzieci i tekstu
:not(x)
Nie pasuje do x
:is(x, y) / :where(x, y)
Pasuje do dowolnego z listy; where ma zerową specyficzność
:has(x)
Zawiera coś pasującego do x albo coś takiego po nim następuje
:root
Element html
:target
Element, którego id jest w hashu adresu URL
Pseudoelementy i przepisy na ::before / ::after
Części elementu
Pseudoelement
Wskazuje
::before / ::after
Wygenerowaną treść przed treścią elementu lub po niej
::first-letter / ::first-line
Pierwszą literę lub pierwszą wyrenderowaną linię bloku
::placeholder
Tekst placeholdera w polu
::selection
Tekst zaznaczony przez użytkownika
::marker
Punktor lub numer elementu listy
::file-selector-button
Przycisk pola wyboru pliku
::backdrop
Warstwę za modalnym oknem dialogowym lub elementem pełnoekranowym
Gwiazdka pola wymaganego, ikona linku zewnętrznego i cudzysłów
Każda ozdoba żyje w CSS, więc HTML pozostaje czysty. Oba pseudoelementy wymagają content.
:hover, :focus-visible i :has() razem
Przejdź klawiszem Tab do pola, aby zobaczyć pierścień. Karta robi się czerwona tylko wtedy, gdy zawiera błędny adres email.
Start
Strona partnera
Menu
Sezonowe dania, zmieniane co tydzień.
Zapytaj o alergeny.
Zupa
Sałatka
Risotto
Tarta
Kawa
Imię
Uwagi
Tester selektorów
Selektor
Przykładowe selektory
To nie jest prawidłowy selektor w tej przeglądarce.
Dopasowano elementów: {n}
Dopasowano elementów: {n}
Specyficzność czytaj jako ID, klasy, typy. Trzeci element, Risotto, ma klasę featured; pierwszy akapit ma id intro.
Kalkulator nth-child
Formuła wewnątrz :nth-child( )
Liczba elementów: {n}
Przykładowe formuły
Użyj postaci takiej jak 2n+1, -n+3, odd, even albo pojedynczej liczby.