Selektory CSSExplained

53 of 53 rows

Selektor↕	Do czego pasuje↕	Przykład↕
Podstawowe
⤢type	Każdy element o tej nazwie znacznika.	button { }
⤢.class	Elementy z tą klasą.	.active { }
⤢#id	Jedyny element o tym identyfikatorze.	#header { }
⤢*	Każdy element.	* { box-sizing: border-box; }
⤢:root	Korzeń dokumentu; zwykłe miejsce dla globalnych właściwości niestandardowych.	:root { --gap: 1rem; }
⤢A, B	Elementy dopasowane przez A lub B (grupowanie).	h1, h2, h3 { }
Kombinatory
⤢A B	Każdy B będący potomkiem A.	nav a { }
⤢A > B	B będące bezpośrednim dzieckiem A.	ul > li { }
⤢A + B	B bezpośrednio po A, ten sam rodzic.	h1 + p { }
⤢A ~ B	Każdy B występujący po A, ten sam rodzic.	h1 ~ p { }
Pseudoklasy (stan)
⤢:hover	Element, gdy kursor znajduje się nad nim.	a:hover { }
⤢:focus	Element, który ma fokus klawiatury.	input:focus { }
⤢:first-child	Element będący pierwszym dzieckiem swojego rodzica.	li:first-child { }
⤢:nth-child(n)	N-te dziecko; przyjmuje wzory takie jak 2n.	tr:nth-child(2n) { }
⤢:not()	Elementy, które nie pasują do żadnego wewnętrznego selektora; od Selectors 4 przyjmuje listę.	li:not(:first-child, .skip) { }
⤢:checked	Zaznaczony checkbox, przycisk radiowy lub opcja.	input:checked { }
⤢:disabled	Wyłączone pole lub przycisk.	button:disabled { }
⤢:has()	Rodzic zawierający dopasowanie wewnętrznego selektora.	li:has(ul) { }
⤢:is()	Dowolny selektor z listy; specyficzność to najwyższa z listy.	:is(ol, ul) li { }
⤢:where()	To samo co :is(), ale ze specyficznością zero.	:where(ol, ul) li { }
⤢:focus-visible	Fokus, który powinien pokazać obwódkę, zwykle z klawiatury.	a:focus-visible { }
⤢:focus-within	Element, który sam ma fokus lub ma go jego potomek.	form:focus-within { }
⤢:last-child	Element będący ostatnim dzieckiem swojego rodzica.	li:last-child { }
⤢:only-child	Element bez rodzeństwa.	p:only-child { }
⤢:nth-of-type(n)	N-te rodzeństwo o tym samym znaczniku; przyjmuje wzory takie jak 2n.	p:nth-of-type(2n) { }
⤢:first-of-type, :last-of-type	Pierwsze lub ostatnie rodzeństwo o tym samym znaczniku.	p:first-of-type { }
⤢:empty	Element bez dzieci i bez tekstu.	td:empty { }
⤢:link, :visited	Nieodwiedzone i już odwiedzone linki.	a:visited { }
⤢:required, :optional	Pola oznaczone jako wymagane i pola pozostawione opcjonalne.	input:required { }
⤢:valid, :invalid	Pola, których wartość przechodzi lub nie przechodzi reguł walidacji.	input:invalid { }
⤢:read-only	Pole, którego użytkownik nie może edytować.	input:read-only { }
⤢:target	Element, którego identyfikator pasuje do fragmentu URL.	#note:target { }
⤢:default	Wstępnie wybrana opcja lub domyślny przycisk grupy.	input:default { }
⤢:indeterminate	Checkbox ustawiony w stan nieokreślony przez skrypt.	input:indeterminate { }
⤢:defined	Każdy wbudowany element lub element niestandardowy po jego zarejestrowaniu.	my-widget:defined { }
⤢:lang()	Element w podanym języku.	p:lang(fr) { }
Pseudoelementy
⤢::before	Wygenerowany węzeł treści przed elementem.	label::before { content: ""; }
⤢::after	Wygenerowany węzeł treści po elemencie.	code::after { content: ";"; }
⤢::first-letter	Pierwsza litera bloku tekstu.	p::first-letter { }
⤢::placeholder	Tekst zastępczy pola.	input::placeholder { }
⤢::first-line	Pierwsza linia bloku tekstu.	p::first-line { }
⤢::selection	Tekst podświetlony przez użytkownika.	::selection { }
⤢::marker	Punkt lub numer elementu listy.	li::marker { }
⤢::backdrop	Obszar za elementem pełnoekranowym lub dialogiem.	dialog::backdrop { }
⤢::file-selector-button	Przycisk przeglądania wewnątrz pola pliku.	input::file-selector-button { }
⤢::part()	Część shadow DOM wystawiona przez hosta.	my-widget::part(header) { }
Selektory atrybutów
⤢[attr]	Elementy mające ten atrybut, o dowolnej wartości.	[required] { }
⤢[attr=val]	Atrybut dokładnie równy val.	[type="submit"] { }
⤢[attr^=val]	Atrybut zaczyna się od val.	a[href^="https"] { }
⤢[attr$=val]	Atrybut kończy się na val.	a[href$=".pdf"] { }
⤢[attr*=val]	Atrybut zawiera val.	a[href*="login"] { }
⤢[attr~=val]	Rozdzielana spacjami lista zawierająca val.	[class~="badge"] { }
⤢[attr|=val]	Wartość równa val lub zaczynająca się od val plus myślnik.	[lang|="en"] { }