Selektory CSS służą do wybierania elementów HTML, które chcesz ostylować.
Selektory CSS to elementy języka CSS, które pozwalają na określanie elementów HTML, do których mają być stosowane reguły CSS. Selektory pozwalają na precyzyjne wybieranie elementów na stronie, takich jak określone elementy HTML, klasy, identyfikatory lub atrybuty. Dzięki temu, można zdefiniować reguły CSS, które będą odnoszone tylko do określonych elementów na stronie, bez wpływu na inne elementy.
Istnieje wiele różnych rodzajów selektorów, takich jak selektory elementów, klas, identyfikatorów, atrybutów i wiele innych. Każdy z nich pozwala na różne sposoby selekcji elementów na stronie i jest używany w różnych sytuacjach, aby uzyskać odpowiedni wygląd i formatowanie. Selektory CSS są bardzo ważnym elementem języka i pozwalają na tworzenie precyzyjnie zdefiniowanych stylów, które dokładnie odpowiadają wymaganiom witryny.
| Selektor | Przykład | Opis |
|---|---|---|
| .class | .container | Wybiera wszystkie elementy zawierające klasę class="container" |
| .class1.class2 | .dropdown.open | Wybiera wszystkie elementy zawierające obie klasy "dropdown" oraz "open" |
| .class1 .class2 | .article .heading | Selektor wybiera wszystkie elementy z klasą "heading", które znajdują się wewnątrz elementu o klasie "article" |
| #id | #menu | Wybiera element o id "menu" |
| * | * | Wybiera wszystkie elementy |
| element | div | Wybiera wszystkie elementy <div> |
| element.class | div.box | Wybiera wszystkie elementy <div> zawierające klasę class="box" |
| element,element | div, p | Wybiera wszystkie elementy <div> oraz wszystkie elementy <p> |
| element element | div p | Selektor wybiera wszystkie elementy <p> znajdujące się wewnątrz elementów <div> |
| element>element | div > p | Wybiera wszystkie elementy <p>, których rodzicem jest element <div> |
| element+element | div + p | Wybiera pierwszy element <p>, który znajduje się zaraz po elemencie <div> |
| element1~element2 | p ~ ul | Wybiera wszystkie elementy <ul>, które są poprzedzone elementem <p> |
| [attribute] | [target] | Wybiera wszystkie elementy zawierające atrybut target |
| [attribute=value] | [target=_blank] | Wybiera wszystkie elementy zawierające atrybut target o wartości target="_blank" |
| [attribute~=value] | [title~=flower] | Wybiera wszystkie elementy z atrybutem title zawierającym słowo "flower" |
| [attribute|=value] | [lang|=en] | Wybiera wszystkie elementy z atrybuten lang równym "en" lub zaczynającym się od "en-" |
| [attribute^=value] | a[href^="https"] | Wybiera wszystkie elementy <a>, których wartość atrybutu href zaczyna się od "https" |
| [attribute$=value] | a[href$=".pdf"] | Wybiera każdy element <a>, którego wartość atrybutu href kończy się na ".pdf" |
| [attribute*=value] | a[href*="cssgenerator"] | Selektor wybiera każdy element <a>, którego wartość atrybutu href zawiera ciąg znaków "cssgenerator" |
| :active | a:active | Wybiera wszystkie aktywne linki |
| ::after | p::after | Umieszcza zawartość na końcu treści każdego elementu <p> |
| ::before | p::before | Umieszcza zawartość przed treścią każdego elementu <p> |
| :checked | input:checked | Wybiera wszystkie zaznaczone elementy <input> |
| :default | input:default | Wybiera domyślnie zaznaczony element <input> |
| :disabled | input:disabled | Wybiera wszystkie nieaktywne elementy <input> |
| :empty | p:empty | Wybiera wszystkie elementy <p>, które nie zawierają w sobie żadnych innych elementów HTML |
| :enabled | input:enabled | Wybiera wszystkie aktywne elementy <input> |
| :first-child | p:first-child | Wybiera każdy element <p>, który jest pierwszym dzieckiem rodzica |
| ::first-letter | p::first-letter | Selektor wybiera pierwszą literę każdego elemenu <p> |
| ::first-line | p::first-line | Wybiera pierwszą linię każdego elementu <p> |
| :first-of-type | p:first-of-type | Wybiera każdy element <p>, który jest pierwszym elementem <p> rodzica |
| :focus | input:focus | Wybiera element input, który zawiera focus |
| :fullscreen | :fullscreen | Wybiera element, który jest w trybie full-screen |
| :hover | a:hover | Wybiera linki, które zostały "najechane" kursorem myszy |
| :in-range | input:in-range | Wybiera elementy input zawierające się w określonym zakresie |
| :indeterminate | input:indeterminate | Selektor wybiera element input, który spełnia zasadę pseudoklasy :indeterminate |
| :invalid | input:invalid | Wybiera wszystkie elementy input, które zawierają niepoprawną wartość |
| :lang(language) | p:lang(pl) | Wybiera każdy element <p>, którego atrybut lang jest równy "pl" |
| :last-child | p:last-child | Wybiera każdy element <p>, który jest ostatnim dzieckiem swojego rodzica |
| :last-of-type | p:last-of-type | Wybiera każdy element <p>, który jest ostatnim elementem tego typu u swojego rodzica |
| :link | a:link | Wybiera wszystkie nieodwiedzone linki |
| ::marker | ::marker | Wybiera markery list |
| :not(selector) | :not(p) | Wybiera każdy element, który nie jest elementem <p> |
| :nth-child(n) | p:nth-child(2) | Wybiera każdy element <p>, który jest drugim elementem swojego rodzica |
| :nth-last-child(n) | p:nth-last-child(2) | Wybiera każdy element <p>, który jest drugim elementem swojego rodzica licząc od końca |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Wybiera każdy element <p>, który jest ostatnim elementem tego typu u swojego rodzica, licząc od końca |
| :nth-of-type(n) | p:nth-of-type(2) | Wybiera każdy element <p>, który jest drugim elementem tego typu u swojego rodzica |
| :only-of-type | p:only-of-type | Wybiera każdy element <p>, który jest jedynym elementem tego typu u swojego rodzica |
| :only-child | p:only-child | Wybiera każdy element <p>, który jest jedynym dzieckiem swojego rodzica |
| :optional | input:optional | Selektor wybiera elementy input, które nie zawierają atrybutu "required" |
| :out-of-range | input:out-of-range | Wybiera wszystkie elementy input, których wartość wykracza poza określony zakres |
| ::placeholder | input::placeholder | Wybiera wszystkie elementy input, które zawierają atrybut "placeholder" |
| :read-only | input:read-only | Wybiera wszystkie elementy input z atrybutem "readonly" |
| :read-write | input:read-write | Wybiera wszystkie elementy input bez atrybutu "readonly" |
| :required | input:required | Wybiera wszystkie elementy input z atrybutem "required" |
| :root | :root | Wybeira element root dokumentu |
| ::selection | ::selection | Wybiera część elementu, która jest zaznaczona przez użytkownika |
| :target | #news:target | Wybiera aktywny element #news (po kliknięciu w URL z anchorem zawierającym taki anchor) |
| :valid | input:valid | Wybiera wszystkie elementy input z prawidłową wartością |
| :visited | a:visited | Selektor wybiera wszystkie odwiedzone linki |