Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Selektory w CSS3

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).

Trzy miesiące temu na naszej stronie…

Artykuł: Charles Dickens

Charles Dickens

Artykuł: GD-ROM

GD-ROM

Artykuł: Korekcja współczynnika mocy

Korekcja współczynnika mocy

Artykuł: Pasywne zasilacze komputerowe

Pasywne zasilacze komputerowe

Artykuł: Optimum Power Calibration

Optimum Power Calibration

Artykuł: Bash: Instrukcje warunkowe

Bash: Instrukcje warunkowe

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły