Selektory CSS 2.1 – część 3

Oto trzecia, a zarazem ostatnia część serii artykułów, które opisują selektory dostępne w CSS 2.1. Część 1 obejmuje postawy, takie jak selektor typu, selektor klasy, selektor uniwersalny czy selektory proste. Część 2 wyjaśnia działanie selektorów połączonych, sposób użycia grupowania oraz atrybutów selektorów.

Tym razem przyjrzymy się bliżej pseudo-klasom i pseudo-elementom. Tak jak bardziej zaawansowane selektory, o których była mowa w drugiej części, pseudo-klasy i pseudo-elementy nie są w pełni obsługiwane przez wszystkie nowoczesne przeglądarki, na co należy zwrócić uwagę. Nie chciałbyś, aby zawartość twojej strony była niedostępna w przeglądarce, która nie obsługuje CSS opisanego tutaj.

Pseudo-klasy i pseudo-elementy

Pseudo-klasy i pseudo-elementy można używać do formatowania elementów, które nie są jawnie określone w strukturze dokumentu. Przykładowo w kodzie nie występuje element, który odnosi się do pierwszej linii paragrafu lub pierwszej litery innego tekstu.

Pseudo-klasy

Pseudo-klasy nie dopasowują elementów na podstawie ich nazwy, atrybutów lub zawartości

:first-child

Ta pseudo-klasa pasuje do elementu, który jest pierwszym dzieckiem innego elementu. Powiedzmy, że chcesz zmienić wygląd pierwszego paragrafu w artykule. Jeśli artykuł jest zawarty w elemencie div z atrybutem class równym “article” to poniższe reguły będą pasować do pierwszego elementu p w każdym artykule:

div.article p:first-child {
  font-style:italic;
}

Dla formatowania elementów p, które są pierwszymi dziećmi dowolnego elementu, możesz użyć następującej reguły:

p:first-child {
  font-style:italic;
}

:link i :visited

Pseudo-klasa link dotyczy nieodwiedzonych i odwiedzonych linków. Obydwa stany wykluczają się wzajemnie, czyli link nie może być, w tym samym czasie odwiedzony i nieodwiedzony.

Pseudo-klasy te stosują się wyłącznie do hiperłączy określonych w kodzie jako kotwice. Oznacza to, że w HTML są to elementy a z określonym atrybutem href. Poniższe selektory są identyczne, dopóki nie odnoszą się żadnych innych elementów.

a:link
:link

:hover, :active i :focus

Dynamiczne pseudo-klasy można używać do zmiany wyglądu pewnych elementów w zależności od akcji wykonanych przez użytkownika.

:hover obowiązuje kiedy użytkownik wskaże poprzez wskaźnik dany element, ale go nie aktywuje. Powszechnie oznacza to najechanie kursorem myszy na dany element.

:active obowiązuje kiedy dany element jest aktywny w pewnym momencie. W przypadku użycia myszki oznacza to, że przycisk został naciśnięty i pozostaje wciśnięty, aż zostanie zwolniony.

:focus obowiązuje kiedy dany element posiada focus, czyli jest ciągle aktywny. Oznacza to, że element oczekuje na pewną akcję, dla przykładu naciśnięcie klawisza klawiatury.

Dany element może pasować w tym samym czasie do kilku pseudo-klas. Przykładowo, element może posiadać focus, jak również być w stanie hover, w tym samych czasie.

input[type=text]:focus {
  color:#000;
  background:#ffe;
}
input[type=text]:focus:hover {
  background:#fff;
}

Pierwsza reguła pasuje do elementów input, które posiadają focus. Druga reguła pasuje do pól tekstowych w stanie focus i hover.

:lang

Pseudo-klasa języka jest używana do zmiany stylu elementów, które zawierają treść w określonym języku (chodzi tu język mówiony, a nie język znaczników). Poniższe reguły definiują cudzysłowy w języki szwedzkim:

q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }

Język w jakim jest treść dokumentu lub elementu jest określony przez atrybut lang w HTML i atrybut xml:lang w XHTML.

Pseudo-elementy

Pseudo-elementy pozwalają autorom na formatowanie elementów, które normalnie są niedostępne jako węzły struktury dokumentu.

:first-line

Pseudo-element :first-line stosuje się do pierwszej linii tekstu w paragrafie. Może być stosowany wyłącznie do elementów, których właściowość display w CSS określona jest jako block, inline-block, table-caption lub table-cell.

Długość pierwszej linii tekstu zależy oczywiście od wielu czynników, takich jak rozmiar czcionki czy szerokość elementu, zawierającego tekst.

Poniższe reguły stosują się do pierwszej linii tekstu w paragrafie:

p:first-line {
  font-weight:bold;
  color;#600;
}

Zaznaczam, że istnieją ograniczenia w stosowaniu pewnych właściwości do pseudo-elementu :first-line. Zobacz The :first-line pseudo-element, aby upewnić się, które właściwości mogą być używane.

:first-letter

Ten pseudo-element pozwala na zmianę pierwszej litery lub cyfry danego elementu. Może być stosowany tylko do elementów o wyświetlaniu typu block, list-item, table-cell, table-caption lub inline-block.

Poniższe reguły znajdą zastosowanie do pierwszego znaku w elemencie, o klasie “preamble”:

.preamble:first-letter {
  font-size:1.5em;
  font-weight:bold;
}

Tak jak pseudo-element :first-line, również pseudo-element :first-letter ma pewne ograniczenia, dotyczące dozwolonych właściwości. Zobacz The :first-letter pseudo-element, aby mieć pewność, czy używasz dozwolonych właściwości.

:before i :after

Pseudo-elementy :before i :after pozwalają na dołączanie generowanej zawartości na początku i na końcu elementu.

Oto przykład użycia pseudo-elementu :before zaczerpnięty z artykułu Custom borders with advanced CSS Rogera Johanssona:

.cbb:before {
  content:"";
  display:block;
  height:17px;
  width:18px;
  background:url(top.png) no-repeat 0 0;
  margin:0 0 0 -18px;
}

Przykład wykorzystania :after do załączenia URL po linku tekstowym:

a:link:after {
  content: " (" attr(href) ") ";
}

Internet Explorer – problemy

Zanim zaczniemy używać wszystkiego czego nauczyliśmy się o selektorach, należy wziąć pod uwagę, że Internet Explorer łącznie z IE6 nie wspiera całkowicie selektorów CSS 2.1. Problematyczne lub nieobsługiwane są następujące selektory:

  • Selekror dziecka
  • Selektor sąsiedni
  • Selektor atrybutu
  • Selektor klas wielokrotnych
  • Pseudo-klasa :first-child
  • Pseudo-klasy języków
  • Pseudo-elementy :before i :after
  • Pseudo-klasa :hover działa tylko dla elementu a
  • Pseudo-klasa :focus nie jest wspierana. Dla elementu a, który posiada focus, jest stosowana pseudo-klasa :active

Szczęśliwie, Internet Explorer 7 powinien w pełni wspierać selektory CSS 2.1.

Masz moc – używaj jej właściwie

To wszystko. Poznałeś wszystkie możliwości jakie oferują selektory CSS 2.1, powinieneś je teraz właściwie wykorzystać do formatowania swoich dokumentów. Stosuj je uważnie, aby utrzymywać znaczniki w porządku, jak również zwiększać dostępność i użyteczność. Pamiętaj także, co dzieje się w starszych przeglądarkach, które nie wspierają dla zaawansowanych selektorów CSS.

Ten artykuł jest tłumaczeniem oryginalnego tekstu CSS 2.1 selectors, Part 2, którego autorem jest Roger Johansson.

5 myśli nt. „Selektory CSS 2.1 – część 3

  1. purysta

    Rany boskie! Skąd tyle bzdur w komentarzach? Współczuję. Pozdrawiam

  2. Łukasz Adamczuk Autor wpisu

    Muszę przyznać, że blisko 500 komentarzy z jednego dnia trudno nazwać wartościową dyskusją. Prawidłowe określenie tego zjawiska to spam, za który odpowiadają roboty sieciowe.

    Można to dość łatwo naprawić poprzez zastosowanie odpowiednich wtyczek dla WordPressa, np. Spam Karma 2.

  3. Pingback: Pseudoklasy w CSS « CssTips

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>