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 | Linki |
|---|---|---|---|
| * | * | Wszystkie elementy na stronie | Zobacz więcej |
| .class | .title | Elementy zawierająca klasę .title | Zobacz więcej |
| #id | #header | Element zawierający identyfikator #header | Zobacz więcej |
| element | section | Każdy element będący sekcją | Zobacz więcej |
| .class.class2 | .title.active | Elementy zawierające jednocześnie klasę .title i .active | Zobacz więcej |
| .class .class2 | .rows .item | Elementy zawierające klasę .item, których rodzicem jest element zawierający klasę .rows | Zobacz więcej |
| element > element | section > p | Paragraf, którego najbliższym, bezpośrednim rodzicem jest sekcja. | Zobacz więcej |
| element1 ~ element2 | section ~ p | Paragrafy bezpośrednio poprzedzone sekcją | Zobacz więcej |
| element + element | section + p | Pierwszy paragraf bezpośrednio poprzedzony sekcją | Zobacz więcej |
| [attribute] | [href] | Każdy element zawierający atrybut href, czyli wszystkie linki | Zobacz więcej |
| [attribute=value] | [href=”#”] | Każdy element z atrybutem href, który zawiera dokładnie # | Zobacz więcej |
| [attribute~=value] | [href~=”site”] | Każdy link, który zawiera w sobie frazę site | Zobacz więcej |
| [attribute^=value] | [href^=”https”] | Każdy element którego atrybut href zaczyna się od https | Zobacz więcej |
| [attribute$=value] | [href^=”.csv”] | Każdy link kończący się .csv | Zobacz więcej |
| [attribute*=value] | [class*=”col”] | Każdy element z klasą zawierającą col | Zobacz więcej |
| :active | a:active | Oznacza aktywny link | Zobacz więcej |
| :after | div:after | Dodaje pseudoelement after po zawartości każdego div’a | Zobacz więcej |
| :before | div:before | Dodaje pseudoelement before przed zawartością każdego div’a | Zobacz więcej |
| :checked | :checked | Oznaczy każdy zaznaczony checkbox lub radio | Zobacz więcej |
| :disabled | input:disabled | Oznacza wyłączone pole tekstowe | Zobacz więcej |
| :empty | div:empty | Oznacza pusty div | Zobacz więcej |
| :enabled | input:enabled | Oznacza dostępne pole tekstowe | Zobacz więcej |
| :first-child | ul li:first-child | Każde pierwsze dziecko na liście | Zobacz więcej |
| :last-child | div p:last-child | Ostatni paragraf w div’ie | Zobacz więcej |
| :first-letter | p:first-letter | Oznacza pierwszy znak w paragrafie | Zobacz więcej |
| :first-line | p:first-line | Oznacza pierwszą linię w paragrafie | Zobacz więcej |
| :first-of-type | ul li:first-of-type | Oznacza pierwszy element typu li | Zobacz więcej |
| :last-of-type | ul li:last-of-type | Oznacza ostatni element typu li | Zobacz więcej |
| :focus | input:focus | Zaznaczone pole tekstowe | Zobacz więcej |
| :hover | a:hover | Oznacza styl najechanego myszą linku | Zobacz więcej |
| :in-range | input:in-range | Oznacza pole tekstowe lub numeryczne, gdy wartość jest w zakresie min/max | Zobacz więcej |
| :out-of-range | input:out-of-range | Oznacza pole tekstowe lub numeryczne, gdy wartość jest poza zakresem min/max | Zobacz więcej |
| :indeterminate | input:indeterminate | Oznacza pole będące w nieokreślonym stanie | Zobacz więcej |
| :invalid | input:invalid | Oznacza pole, w które wprowadzono nieprawidłową wartość | Zobacz więcej |
| :visited | a:visited | Oznaczy odwiedzony link | Zobacz więcej |
| :link | a:link | Każdy nieodwiedzony link | Zobacz więcej |
| ::marker | ul li::marker | Styl punktora listy | Zobacz więcej |
| :not | :not(:last-child) | Funkcja oznaczy każdy nieostatni element | Zobacz więcej |
| :nth-child | :nth-child(3n) | Funkcja oznaczy co 3 element | Zobacz więcej |
| :nth-last-child | :nth-last-child(2) | Funkcja oznaczy 2 element od końca | Zobacz więcej |
| :nth-last-of-type | :nth-last-of-type(2) | Funkcja oznaczy 2 element danego typu od końca | Zobacz więcej |
| :nth-of-type | :nth-of-type(3) | Funkcja oznaczy 3 element danego typu | Zobacz więcej |
| :only-of-type | p:only-of-type | Oznaczy tylko paragraf będący jedynym dzieckiem danego typu w kontenerze | Zobacz więcej |
| :only-child | span:only-child | Oznaczy tylko span będący jedynym dzieckiem w kontenerze | Zobacz więcej |
| ::placeholder | input::placeholder | Styl dla placeholder’a | Zobacz więcej |
| :read-only | input:read-only | Oznaczy element oznaczony tylko do odczytu | Zobacz więcej |
| :required | input:required | Oznaczy pole wymagane | Zobacz więcej |
| :root | :root | Styl dla tzw. root’a dokumentu | Zobacz więcej |
| ::selection | ::selection | Styl dla zaznaczonego tekstu | Zobacz więcej |
| :target | #header:target | Styl dla aktywnej kotwicy | Zobacz więcej |
| :valid | input:valid | Styl dla poprawnie wypełnionego pola | Zobacz więcej |
