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.