piątek,
Selektory w CSS3
Arkusz stylów CSS składa się z listy reguł, które zawierają co najmniej jeden selektor i blok deklaracji. Selektor określa, do których elementów odnosi się dana reguła. W materiale zamieszczono skrócony opis wszystkich rodzajów selektorów elementów dostępnych w CSS3. Można to traktować jako podręczną ściągawkę.
Selektory elementów
- * – każdy element (CSS2);
- E – każdy element typu E (CSS1);
- E F – element F będący potomkiem elementu E (CSS1);
- E > F – element F, który jest pierwszym dzieckiem elementu E (CSS2);
- E + F – element F, który nastąpił bezpośrednio po elemencie E (CSS2);
- E ~ F – element F poprzedzony przez element E przy spełnieniu warunku, że F i E są braćmi (mają wspólny bezpośredni element nadrzędny) (CSS3).
Selektory klasy i identyfikatora
- E#myid – element E z atrybutem id równym "myid" (selektor identyfikatora, CSS1);
- E.class_name – każdy element E z nadaną klasą class_name, równoważne dla E[class~=class_name] (selektor klasy, CSS1).
Selektory atrybutów
- E[attr] – każdy element E z atrybutem "attr" (CSS2);
- E[attr="val"] – każdy element E, którego atrybut "attr" ma wartość równą dokładnie "val" (CSS2);
- E[attr~="val"] – każdy element E, którego atrybut "attr" jest listą rozdzielonych spacjami wartości i jedna z nich jest równa "val" (CSS2);
- E[attr^="val"] – każdy element E, którego wartość atrybutu "attr" rozpoczyna się na "val" (CSS3);
- E[attr$="val"] – każdy element E, którego wartość atrybutu "attr" kończy się na "val" (CSS3);
- E[attr*="val"] – każdy element E, którego wartość atrybutu "attr" zawiera "val" (CSS3);
- E[attr|="val"] – każdy element E, którego atrybut "attr" jest listą rozdzielonych łącznikami wartości i zaczyna się od "val" (CSS2).
Pseudo-klasy
- E:root – główny węzeł dokumentu (CSS3);
- E:nth-child(n) – element E, który jest n-tym dzieckiem swojego rodzica (CSS3);
- E:nth-last-child(n) – element E, który licząc od końca jest n-tym dzieckiem swojego rodzica (CSS3);
- E:nth-of-type(n) – element E, który jest n-tym elementem danego typu (E) w grupie rodzeństwa (CSS3);
- E:nth-last-of-type(n) – element E, który licząc od końca jest n-tym elementem danego typu (E) w grupie rodzeństwa (CSS3);
- E:first-child – element E, który jest pierwszym dzieckiem swojego rodzica (CSS2);
- E:last-child – element E, który jest pierwszym dzieckiem swojego rodzica (CSS3);
- E:first-of-type – pierwszy element typu E w grupie rodzeństwa (CSS3);
- E:last-of-type – ostatni element typu E w grupie rodzeństwa (CSS3);
E:only-child – element typu E, który jest jedynym potomkiem elementu nadrzędnego (CSS3);
E:only-of-type – element E, który jest jedynym potomkiem danego typu elementu nadrzędnego (CSS3);
- E:empty – element E, który nie zawiera żadnych węzłów potomnych (w tym węzłów tekstowych) (CSS3);
- E:link – element E będący odsyłaczem, który nie został jeszcze odwiedzony (CSS1);
- E:visited – element E będący odsyłaczem, który został już odwiedzony (CSS1);
- E:active – aktywowany przez użytkownika element E (CSS1);
- E:hover – wskazany przez użytkownika element E (CSS1);
- E:focus" – wybrany przez użytkownika element E (np. pole formularza z wyświetlonym kursorem) (CSS1);
- E:target – element będący celem lokalnego odnośnika z atrybutem href równym E (CSS3);
- E:lang(pl) – element E z atrybutem lang równym pl (CSS2);
- E:enabled – odblokowany element E interfejsu użytkownika (CSS3);
- E:disabled" – zablokowany element E interfejsu użytkownika (CSS3);
- E:checked – zaznaczony element E interfejsu użytkownika (input typu radio lub checkbox) (CSS3);
- E:not(s) – element E, który nie pasuje do selektora s (pseudoklasa negacji (CSS3).
Pseudo-elementy
- E::first-line – pierwszy wiersz elementu E (CSS1);
- E::first-letter – pierwsza litera elementu E (CSS1);
- E::before – generuje pseudoelement, który jest pierwszym dzieckiem elementu E (CSS2);
- E::after – generuje pseudoelement, który jest ostatnim dzieckiem elementu E (CSS2).
