Selektory w CSS – zbiór
W arkuszach styli CSS selektor to cześć kodu poprzedzająca nawias klamrowy. Określa on element lub wiele elementów, do których odnosi się dana reguła. Wyróżniamy kilka grup selektorów, które oznaczą nam elementy na stronie. Są to selektory elementów, pseudoelementów, klas i identyfikatorów, pseudoklas, atrybutów, uniwersalne oraz potomków. Selektory nie mogą zostać użyte w stylu 'inline’. Poniżej przedstawione zostały rodzaje selektorów.
ŁukaszPodziel się artykułem:
W arkuszach styli CSS selektor to cześć kodu poprzedzająca nawias klamrowy. Określa on element lub wiele elementów, do których odnosi się dana reguła. Wyróżniamy kilka grup selektorów, które oznaczą nam elementy na stronie. Są to selektory elementów, pseudoelementów, klas i identyfikatorów, pseudoklas, atrybutów, uniwersalne oraz potomków. Selektory nie mogą zostać użyte w stylu 'inline’. Poniżej przedstawione zostały rodzaje selektorów.
| Selektor | Przykład | Opis selektora |
|---|---|---|
| * | * | Wszystkie elementy na stronie |
| .class | .title | Elementy zawierająca klasę .title |
| #id | #header | Element zawierający identyfikator #header |
| element | section | Każdy element będący sekcją |
| .class.class2 | .title.active | Elementy zawierające jednocześnie klasę .title i .active |
| .class .class2 | .rows .item | Elementy zawierające klasę .item, których rodzicem jest element zawierający klasę .rows |
| element.class | section.title | Sekcja zawierająca klasę .title |
| element,element2 | section, header | Każda sekcja oraz header |
| element element | div p | Każdy paragraf wewnątrz każdego div’a |
| element > element | section > p | Paragraf, którego najbliższym, bezpośrednim rodzicem jest sekcja. |
| element1 ~ element2 | section ~ p | Paragrafy bezpośrednio poprzedzone sekcją |
| element + element | section + p | Pierwszy paragraf bezpośrednio poprzedzony sekcją |
| [attribute] | [href] | Każdy element zawierający atrybut href, czyli wszystkie linki |
| [attribute=value] | [href=”#”] | Każdy element z atrybutem href, który zawiera dokładnie # |
| [attribute~=value] | [href~=”site”] | Każdy link, który zawiera w sobie frazę site |
| [attribute^=value] | [href^=”https”] | Każdy element którego atrybut href zaczyna się od https |
| [attribute$=value] | [href^=”.csv”] | Każdy link kończący się .csv |
| [attribute*=value] | [class*=”col”] | Każdy element z klasą zawierającą col |
| :active | a:active | Oznacza aktywny link |
| :after | div:after | Dodaje pseudoelement after po zawartości każdego div’a |
| :before | div:before | Dodaje pseudoelement before przed zawartością każdego div’a |
| :checked | :checked | Oznaczy każdy zaznaczony checkbox lub radio |
| :disabled | input:disabled | Oznacza wyłączone pole tekstowe |
| :empty | div:empty | Oznacza pusty div |
| :enabled | input:enabled | Oznacza dostępne pole tekstowe |
| :first-child | ul li:first-child | Każde pierwsze dziecko na liście |
| :last-child | div p:last-child | Ostatni paragraf w div’ie |
| :first-letter | p:first-letter | Oznacza pierwszy znak w paragrafie |
| :first-line | p:first-line | Oznacza pierwszą linię w paragrafie |
| :first-of-type | ul li:first-of-type | Oznacza pierwszy element typu li |
| :last-of-type | ul li:last-of-type | Oznacza ostatni element typu li |
| :focus | input:focus | Zaznaczone pole tekstowe |
| :hover | a:hover | Oznacza styl najechanego myszą linku |
| :in-range | input:in-range | Oznacza pole tekstowe lub numeryczne, gdy wartość jest w zakresie min/max |
| :out-of-range | input:out-of-range | Oznacza pole tekstowe lub numeryczne, gdy wartość jest poza zakresem min/max |
| :indeterminate | input:indeterminate | Oznacza pole będące w nieokreślonym stanie |
| :invalid | input:invalid | Oznacza pole, w które wprowadzono nieprawidłową wartość |
| :visited | a:visited | Oznaczy odwiedzony link |
| :link | a:link | Każdy nieodwiedzony link |
| ::marker | ul li::marker | Styl punktora listy |
| :not | :not(:last-child) | Funkcja oznaczy każdy nieostatni element |
| :nth-child | :nth-child(3n) | Funkcja oznaczy co 3 element |
| :nth-last-child | :nth-last-child(2) | Funkcja oznaczy 2 element od końca |
| :nth-last-of-type | :nth-last-of-type(2) | Funkcja oznaczy 2 element danego typu od końca |
| :nth-of-type | :nth-of-type(3) | Funkcja oznaczy 3 element danego typu |
| :only-of-type | p:only-of-type | Oznaczy tylko paragraf będący jedynym dzieckiem danego typu w kontenerze |
| :only-child | span:only-child | Oznaczy tylko span będący jedynym dzieckiem w kontenerze |
| :optional | input:optional | Pole input nieoznaczone jako wymagane (required) |
| ::placeholder | input::placeholder | Styl dla placeholder’a |
| :read-only | input:read-only | Oznaczy element oznaczony tylko do odczytu |
| :required | input:required | Oznaczy pole wymagane |
| :root | :root | Styl dla tzw. root’a dokumentu |
| ::selection | ::selection | Styl dla zaznaczonego tekstu |
| :target | #header:target | Styl dla aktywnej kotwicy |
| :valid | input:valid | Styl dla poprawnie wypełnionego pola |
