Nowoczesne przeglądarki, takie jak Opera, Safari czy Firefox bardzo sumiennie podchodzą do standardów sieciowych rekomendowanych przez W3C. Rownież najmłodszy Google Chrome nie pozostaje w tyle za liderami przeglądarek.

Jedyną czarną owcą wśród tego dojrzałego towarzystwa jest Internet Explorer, który pod żadnym pozorem nie chce dostosować się do nowej sytuacji. Wprawdzie kolejne wersje przeglądarki Microsoftu dają nadzieję na przyszłość. Jednak zmiany następują zbyt wolno, aby wizja zrównania się z nowoczesnymi przeglądarkami była realna.

Nowe selektory CSS 3 dają programistom dużo więcej możliwości podczas tworzenia aplikacji internetowych. Zaawansowane selektory atrybutów, strukturalne pseudo-klasy czy wsparcie dla zawartości generowanej to standard. Jednak nie wszyscy dostrzegają plusy tego standardu.

Poniższa tabela przedstawia selektory CSS 3 i stopień ich obsługi przez najpopularniejsze przeglądarki internetowe. Jak można było się spodziewać IE w każdej wersji odstaje od całości. Wyniki testu zostały opracowane na podstawie testu selektorów CSS 3.

• Selektor obsługiwany
• Selektor częściowo obsługiwany
• Selektor nieobsługiwany

Bezapelacyjnie widać, że Internet Explorer nie radzi sobie z selektorami CSS3. IE8 obsługuje prawidłowo tylko 22 selektory. Mimo, że są wśród nich selektory złożone i selektory atrybutu to nadal jest kropla w morzu potrzeb. Firefox radzi są dużo lepiej w kwestii obsługi selektorów, ponieważ do pełni szczęścia brakuje tylko ośmiu strukturalnych pseudo-klas. Najlepiej wypadają przeglądarki z silnikiem KHTML/Webkit, a także Presto. Zarówno Opera9, Safari3, jak i Google Chrome w pełni obsługują selektory CSS 3.

Internet Explorer dalej pozostaje na szarym końcu, bez większych perspektyw na zmianę. W tej sytuacji najwięcej tracą użytkownicy, którzy nieświadomi każdego dnia używają przestarzałej przeglądarki, tym samym hamując rozwój internetu.

Pora, aby zmienić przeglądarkę na lepszą. Pora, aby programiści zaczęli wykorzystywać selektory CSS, ponieważ dają większe możliwości. W końcu pora, aby twórcy Internet Explorera zrozumieli, że użytkownicy oczekują lepszego produktu niż do tej pory.

Jeśli popatrzymy w przyszłość to specyfikacja CSS 3 oferuje wiele nowych i potężnych selektorów. Wiele z nich zostało już zaimplementowanych w nowoczesnych przeglądarkach. Niestety ich obsługa póki co jest dość niejednolita i programiści nie mogą do końca na nich polegać. W niektórych przypadkach stosowanie selektorów CSS 3 jest zasadne, więc warto przyjrzeć się im bliżej.

W tym artykule, odnoszę się do specyfikacji przedstawionej w Selectors W3C Working Draft 15 December 2005. Nowe selektory opisane w tym dokumencie będą używane przez CSS 3, ale także inne języki programowania. Kiedy czytasz ten artykuł po miesiącach, albo nawet latach, może warto sprawdzić czy nie jest dostępna aktualniejsza wersja.

Nie zamierzam tu opisywać podstaw na temat selektorów CSS. Jeśli potrzebujesz przypomnienia wiadomości to dobrym miejscem na początek jest artykuł Selektory CSS 21 – część 1.

Na początku poznajmy nowe selektory CSS 3:

Nie martw się, jeśli coś nie jest do końca jasne. Każdy selektor zostanie w artykule dokładnie omówiony, również z przykładami użycia.

Selektory dopasowania ciągu znaków

Grupa ta jest nowa, a selektory w niej zawarte pozwalają programistom znaleźć elementy na podstawie części wartości atrybutu.

Przyjmijmy, że mamy dokument HTML o następującej strukturze:

<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>

Poprzez użycie selektorów dopasowania możesz odnieść się do strukturalnych części dokumentu.

Następująca reguła ustawia kolor tła dla wszystkich elementów div, których id rozpoczyna się od “nav”:

div[id^="nav"] { background:#ff0; }

W tym wypadku selektor będzie pasował do div#nav-primary i div#nav-secondary.

Aby znaleźć elementy div, których id kończy się ciągiem “primary”, możesz użyć następującej reguły:

div[id$="primary"] { background:#ff0; }

Tym razem selektor będzie pasował do div#nav-primary i div#content-primary.

Następujące reguły stosują się do wszystkich elementów div, których id zawiera ciąg “content”:

div[id*="content"] { background:#ff0; }

Elementy, których dotyczy to reguła to div#content-primary, div#content-secondary i div#tertiary-content.

Selektory dopasowania ciągu znaków są w pełni wspierane przez ostatnie wersje przeglądarek: Mozilla, Firefox, Flock, Camino, Safari, OmniWeb i Opera, więc gdyby pominąć Internet Explorer moglibyśmy już zacząć ich używanie.

Pseudo-klasa :target

Adresy URL z względnym odnośnikiem to takie, które zawierają “#” i linkują na podstawie nazwy lub identyfikatora elementu w obrębie dokumentu. Stylizacja takiego elementu jest możliwa dzięki pseudo-klasie :target. Jeśli aktualny adres URL nie zawiera fragmentu z identyfikatorem to pseudo-klasa :target nie pasuje do żadnego elementu.

W przypadku wspomnianej wcześniej struktury HTML, następująca zasada tworzy kontur wokół elementu div#content-primary kiedy adres URL będzie zawierał identyfikator:

div#content-primary:target { outline:1px solid #300; }

Przykład takiego URL to http://www.example.com/index.html#content-primary.

Pseudo-klasa :target jest obecnie wspierana przez przeglądarki rodziny Mozilla i Safari.

Pseudo-klasy interfejsu użytkownika

Pseudo-klasa :enabled i :disabled

Pseudo-klasy:enabled i :disabled pozwalają programistom na określenie wyglądu elementów formularzy, które są dostępne lub niedostępne, pomimo tego, że przeglądarka sama stylizuje kontrolki formularzy. Poniższe reguły zmieniają kolory tła dla pól tekstowych w formularzu w zależności czy są one dostępne czy niedostępne:

input[type="text"]:enabled { background:#ffc; }

input[type="text"]:disabled { background:#ddd; }

Pseudo-klasa :checked

Pseudo-klasa :checked pozwala programistom na określenie wyglądu wybranych (aktywnych) kontrolek radio i checkbox w formularzach. Również w tym przypadku przeglądarka umożliwia stylizowanie elementów formularzy. Poniższe reguły CSS tworzą zieloną ramkę wokół wybranych (aktywnych) elementów radio i checkbox:

input:checked { border:1px solid #090; }

Opera oraz przeglądarki z rodziny Mozilla obsługują pseudo-klasy interfejsu użytkownika.

Należy zaznaczyć, że wygląd formularzy w przeglądarkach może się bardzo różnić, a same przeglądarki bardzo restrykcyjnie traktują zmiany kontrolek formularzy przez programistów. Więcej na ten temat możesz dowiedzieć się z artykułu Styling form controls i Styling even more form controls.

Strukturalne pseudo-klasy

Strukturalne pseudo-klasy pozwalają programistom odwołać się do elementów ze struktury dokumentu, do których dostęp poprzez selektory proste i złożone jest niemożliwy. Strukturalne pseudo-klasy są bardzo potężne, ale niestety nie wszystkie z nich są wspierane przez nowoczesne przeglądarki.

Pseudo-klasa :root

Pseudo-klasa :root odnosi się do do elementu korzenia dokumentu. Dla dokumentów HTML takim korzeniem jest zawsze element HTML, w takim razie poniższe reguły są takie same. Nie do końca, ponieważ :root ma większe znaczenie niż html):

:root { background:#ff0; }
html { background:#ff0; }

Pseudo-klasa :root jest aktualnie wspierana przez przeglądarki z rodziny Mozilla i Safari.

Pseudo-klasa :nth-child()

Pseudo-klasa :nth-child() odnosi się do elementu, który ma przed sobą określoną liczbę rodzeństwa w drzewie dokumentu. Wartość, która o tym decyduje, znajduje się w nawiasach i może być liczą, słowem kluczowym lub formułą.

Numer b pasuje do b-tego dziecka. Następująca reguła stosuje się do wszystkich elementów p, które są trzecim dzieckiem swojego rodzica:

p:nth-child(3) { color:#f00; }

Słowa kluczowe odd i even można wykorzystać do elementów o indeksach nieparzystych i parzystych. Indeks pierwszego elementu to 1, więc ta reguła będzie pasować do każdego paragrafu, który jest pierwszym, trzecim, piątym i kolejnym dzieckiem swojego rodzica:

p:nth-child(odd) { color:#f00; }

Poniższa reguła pasuje do elementów p, które są drugim, czwartym, szóstym i kolejnym dzieckiem swojego rodzica.:

p:nth-child(even) { color:#f00; }

Formuła an + b może być użyta do stworzenia bardziej złożonych wzorów. W przykładowym wzorze, a reprezentuje ilość cykli, n to licznik, startujący od zera, a b przesunięcie wartości. Wszystkie wartości są liczbami całkowitymi. Aby wszystko dokładnie zrozumieć, zapoznaj się z poniższymi przykładami.

Poniższe reguły będą pasować do wszystkich elementów p, których indeks dzieli się przez 3. W pierwszej regule zero można pominąć, tak jak to zrobiliśmy zostało zapisane w drugiej regule:

p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }

Przesunięcie wartości służy do określenia momentu, w którym reguła zaczyna obowiązywać. Jeżeli mamy tabelę z 20 wierszami i chcemy zmienić kolor tła nieparzystych wierszy, ale dopiero od dziesiątego to stosujemy daną regułę:

tr:nth-child(2n+11) { background:#ff0; }

Dopóki n rozpoczyna się od 0, pierwszy element tr, przy którym reguła będzie się stosować to jedenasty element. Następnie będzie trzynasty, piętnasty i tak dalej.

Więcej szczegółów można znaleźć w sekcji :nth-child() pseudo-class specyfikacji selektorów CSS3.

A jak wygląda wsparcie przeglądarek dla tych bardzo użytecznych selektorów? Z tego co wiem, to żadna z nich nie obsługuje w pełni, tych selektorów. Popraw mnie jeśli się mylę.

Pseudo-klasa :nth-last-child()

Pseudo-klasa :nth-last-child() działa tak samo jak pseudo-klasa :nth-child(), z tym wyjątkiem, że odnosi się do inaczej liczonego elementu w strukturze dokumentu. Inaczej mówiąc, rozpoczynamy liczenie od ostatniego dziecka, a nie pierwszego i liczymy wstecz. Poniższa reguła będzie pasowała do przedostatniego elementu tr tabeli:

tr:nth-last-child(2) { background:#ff0; }

Pseudo-klasa :nth-last-child() nie jest wspierana przez żadną przeglądarkę.

Pseudo-klasa :nth-of-type()

Pseudo-klasa :nth-of-type() działa dokładnie jak pseudo-klasa :nth-child(), ale reguły odnoszą się tylko do elementów tego samego typu. Taka reguła pasuje do takich elementów p, które są trzecim elementem p swojego rodzica:

p:nth-of-type(3) { background:#ff0; }

Ten selektor jest użyteczny, kiedy chcemy być pewni, że rzeczywiście odnosimy się do trzeciego elementu p. Na początku można było dojść do wniosku, że odpowiada za to pseudo-klasa nth-child, ale :nth-child(3) obejmuje wszystkie elementy rodzeństwa, więc rezultat będzie inny chyba, że wszystkie elementy p mają jako rodzeństwo tylko i wyłącznie elementy p.

Pseudo-klasa :nth-of-type() nie jest obecnie wspierana przez żadne przeglądarki.

Pseudo-klasa :nth-last-of-type()

Pseudo-klasa :nth-last-of-type() dotyczy elementu, który ma określony number spośród rodzeństwa danego typu w strukturze dokumentu. Pseudo-klasa :nth-last-child() rozpoczyna liczenie od końca, a nie od początku oraz liczy elementy wstecz. Następująca reguła pasuje do każdego drugiego od końca rodzeństwa dla p:

p:nth-last-of-type(2) { background:#ff0; }

Pseudo-klasa :nth-last-of-type() nie jest obecnie wspierana przez przeglądarki.

Pseudo-klasa :last-child

Pseudo-klasa :last-child odnosi się do elementu. który jest ostatnim dzieckiem swojego rodzica. To dokładnie to samo co :nth-last-child(1). Reguła ta pasuje do wszystkich elementów p, które są ostatnim dzieckiem elementu swojego rodzica:

p:last-child { background:#ff0; }

Pseudo-klasa :last-child działa w przeglądarkach z rodziny Mozilla. Opera nie wspiera jej wcale, a Safari tylko w częściowy sposób. O dziwo, działa to jak powinno w OmniWeb (wersja 5.1.1), pomimo faktu powiązania z Safari. Może to być spowodowane uwstecznieniem ostatniej wersji Apple WebKit, ponieważ OmniWeb korzysta przeważnie ze starszych wersji WebKit w porównaniu z Safari.

Pseudo-klasa :first-of-type

Pseudo-klasa :first-of-type obejmuje element, który jest pierwszym spośród rodzeństwa swojego typu. Działa dokładanie jak :nth-of-type(1).

p:first-of-type { background:#ff0; }

Pseudo-klasa :first-of-type nie jest obecnie wspierana przez przeglądarki.

Pseudo-klasa :last-of-type

Pseudo-klasa :last-of-type obejmuje element, który jest ostatnim spośród rodzeństwa swojego typu. Działa dokładanie jak :nth-last-of-type(1).

p:last-of-type { background:#ff0; }

Pseudo-klasa :last-of-type nie jest obecnie wspierana przez przeglądarki.

Pseudo-klasa :only-child

Pseudo-klasa :only-child odnosi się do elementu, którego rodzic nie ma innych dzieci. To samo :first-child:last-child lub :nth-child(1):nth-last-child(1), ale z niższym priorytetem.

p:only-child { background:#ff0; }

Pseudo-klasa :only-child działa w przeglądarkach Mozilli. Safari zdaje się interpretować to jako :first-child, czyli powyższa reguła pasuje do wszystkich elementów p w dokumencie, które są pierwszym dzieckiem swojego rodzica.

Pseudo-klasa :only-of-type

Pseudo-klasa :only-of-type obejmuje swoim działaniem element, którego rodzic nie ma więcej dzieci danego typu. Działa tak samo, ale z mniejszym priorytetem jak :first-of-type:last-of-type lub :nth-of-type(1):nth-last-of-type(1).

p:only-of-type { background:#ff0; }

Pseudo-klasa :only-of-type nie jest aktualnie wspierana przez przeglądarki.

Pseudo-klasa :empty

Pseudo-klasa :empty odnosi się do elementu, który nie ma dzieci. Wliczamy do tego, także węzły tekstowe, więc w następującym przypadku, tylko pierwszy element jest pusty:

<p></p>
<p>Text</p>
<p><em></em></p>

Następujące reguły CSS będą pasować do pierwszego elementu:

p:empty { background:#ff0; }

Pseudo-klasa :empty jest obecnie wspierana przez przeglądarki z rodziny Mozill. Safari błędnie stosuje te reguły do wszystkich elementów danego typu.

Pseudo-klasa negacji

Pseudo-klasa negacji, zapisana jako :not(s), bierze prosty selektor s jako argument. Swoim zasięgiem obejmuje elementy, które nie są objęte działaniem selektora prostego. Przykładowo, następujące reguły CSS stosują się do wszystkich elementów, które nie są elementem p:

:not(p) { border:1px solid #ccc; }

Pseudo-klasa negacji działa aktualnie w przeglądarkach Mozilli i Safari.

Pseudo-element ::selection

Pseudo-element ::selection pasuje do części elementu, który jest aktualnie wybrany lub wyróżniony przez użytkownika. Jedyna możliwość użycia tego selektora to zmiana wyglądu wybranego tekstu.

Tylko kilka właściwości CSS można stosować dla pseudo-klasy ::selection: color, background, cursor, and outline.

Następująca reguła uczyni zaznaczony tekst czerwonym:

::selection { color:#f00;	}

Pseudo-element ::selection działa obecnie tylko w przeglądarkach Safari. Implementacja tego selektora w Safari jest trochę nieprzewidywalna. Mozilla, póki co wspiera własne rozszerzenia ::-moz-selection, a prefiks zostanie w przyszłości usunięty.

Selektor ogólnego rodzeństwa

Selektor ogólnego rodzeństwa składa się z dwóch selektorów prostych rozdzielonych znakiem “tyldy” (~). Pasuje do tych tych elementów drugiego selektora prostego, które są poprzedzone elementem pierwszego selektora. Oba elementy muszą mieć tego samego rodzica, ale drugi element nie musi być bezpośrednio poprzedzony pierwszym elementem. Podana reguła CSS obejmuje elementy ul, które są poprzedzone elementem p i mają tego samego rodzica:

p ~ ul { background:#ff0; }

Opera i przeglądarki rodziny Mozilla obsługują selektor ogólnego rodzeństwa.

Niezbędne wsparcie po stronie przeglądarek

Niektóre selektory CSS 3 są lepiej wspierane, a inne gorzej. Niestety, ale kilka najbardziej użytecznych selektorów nie jest wspieranych w ogóle. Wszystko to sprawia, że w obecnym czasie wykorzystanie selektorów przedstawionych w artykule jest trudne. Pozostaje jedynie czekanie na moment pełnego wsparcia selektorów CSS 3 przez przeglądarki, a póki co korzystanie z już obsługiwanych.

Więc, która przeglądarka twoim zdaniem jako pierwsza będzie wspierała większość lub wszystkie selektory CSS 3? Safari, Firefox czy Opera? A może nawet Internet Explorer?

Ten artykuł jest tłumaczeniem oryginalnego tekstu CSS 3 selectors explained, którego autorem jest Roger Johansson.

Standardy sieciowe zostały ustanowione wiele lat temu, ale bardzo dynamiczny rozwój sieci nie pozwolił na ich stosowanie. Dopiero po latach, kiedy modernizacja witryn internetowych była coraz bardziej kosztowna i czasochłonna cały świat związany z WWW postanowił to zmienić.

Standardy sieciowe sprawiają, że strony internetowe działają szybciej, a ich aktualizacja jest łatwiejsza. Stosowanie języków XHTML i CSS powoduje, że nasze witryny wyglądają tak samo lub bardzo podobnie pod różnymi przeglądarkami. Mało tego poprawnie napisana strona jest także dostępna dla urządzeń przenośnych, czytników ekranów i innych aplikacji, które obsługują standardy sieciowe. Korzystanie z ECMAScript oraz DOM pozwala na zwiększenie użyteczności naszych stron bez konieczności rozwidlania kodu.

Korzyści płynące ze stosowania standardów sieciowych są bezsprzeczne. Na rynku jest wiele książek dotyczących tej tematyki, ale jedna z nich jest warta szczególnej uwagi. Współautor standardów sieciowych Jeffrey Zeldman napisał w 2004 roku książkę, która opisywała historię i cel powstania standardów sieciowych. Po trzech latach autor wzbogacił swoją książkę o nowe przykłady i informacje, które w dalszej części dotyczą standardów sieciowych. W ten sposób powstała pozycja Projektowanie stron internetowych. Standardy sieciowe (wyd. II), która została przetłumaczona i wydana na polskim rynku przez wydawnictwo Helion.

OSTATECZNA OCENA: 5/5

• Autor: Jeffrey Zeldman
• Tytuł oryginału: Designing with Web Standards (2nd Edition)
• Tłumaczenie: Szymon Kobalczyk
• ISBN: 83-246-0774-9
• Format: B5, stron: 464
• Data wydania: 03/2007 (Helion)

Acid 3 jest rozszerzeniem poprzednich testów, które sprawdzają poprawność renderowania kodu HTML w różnych przeglądarkach. Generalnie testy te pokazują w jakim stopniu przeględarki są zgodne ze standardami sieciowymi.

Inna sprawa, że wyniki w takich testów należy traktować z dozą ostrożności. Trudno powiedzieć, że nowa Opera 10 jest najlepszą przeglądarką na rynku, tylko na podstawie wyników Acid 3. Zapewne producent sumiennie podchodzi do oprogramowania, które chce dostarczyć użytkownikom. Wierząc w dalsze zapewnienia programistów, możemy być pewnie, że nie spoczną na laurach i będą udoskonalać swój produkt.

Kolejnym krokiem w tworzeniu lepszego internetu niech będą nowocześniejsze przeglądarki, które będą poprawnie wyświetlać strony zgodne ze standardami sieciowymi.

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.

W tej części przyjrzymy się bliżej zaawansowanym selektorom. Nie wszystkie z nich są w pełnie wspierane przez obecne przeglądarki, ale w przyszłości sytuacja na pewno ulegnie poprawie. Dlatego czas spędzony podczas nauki tych selektorów jest warty swojej ceny.

Łączniki

Łączniki używamy przy tworzeniu selektorów połączonych, składających się z dwóch lub więcej selektorów prostych. Dostępne łączniki to znaki białe (dowolna ilość tabulacji, odstęp lub innych znaków białych), znak > oraz +. Wszystkie z nich są opisane w kolejnych sekcjach.

Selektor potomka

Selektor potomka tworzymy dzięki dwóm lub więcej selektorom prostym rozdzielonym znakiem białym. Reguły odnoszą się do elementów, które są potomkami elementu pasującego do pierwszego selektora prostego. W poniższym przykładzie mamy zasady dotyczące wszystkich elementów p, które są potomkami elementu div:

div p { color:#f00; }

Każdy z selektorów, który tworzy selektor potomka może być również selektorem prostym. W następnym przykładzie mamy reguły dla wszystkich elementów p z wartością class równą info, które znajdują się w elementach listy li, a te z kolei są zawarte w elemencie div o identyfikatorze myid.

div#myid li p.info { color:#f00; }

Selektor potomka pozwala na wskazanie elementu bez określania jego klasy lub identyfikatora, co pomaga utrzymać znaczniki w porządku. Przypuśćmy, że mamy listę nawigacyjną, zawierającą następujące znaczniki:

<ul id="nav">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

Aby opisać elementy listy oraz odnośniki zawarte w liście nawigacyjnej możemy użyć następującego CSS:

#nav li { display:inline; }
#nav a { font-weight:bold; }

Reguły te nie będą pasowały do żadnych innych elementów listy ani odnośników w dokumencie. Jeżeli porównamy to rozwiązanie z przypadkiem, w którym każdy element listy i odnośnik posiada swoją klasę to zdamy sobie sprawę, że stosując selektor potomka nasz kod stanie się bardziej czytelny.

Selektor dziecka

Selektor dziecka odnosi się do bezpośredniego potomka danego elementu. Selektor dziecka zawiera dwa lub więcej selektory rozdzielone znakiem większości, czyli “>”. Rodzic elementu występuje po lewej stronie “>”, a dopuszczalne znaki białe wokół łącznika.

Reguła ta wpływa na wszystkie elementy strong, które są dziećmi elementu div:

div > strong { color:#f00; }

Oczywiście tylko te elementy strong, które są bezpośrednimi potomkami elementu div będą objęte tą regułą. Jeżeli jakikolwiek inny element, znajduje się pomiędzy elementami div oraz strong to selektor nie będzie pasował. W następnym przykładzie tylko “Text one” będzie formatowany przez reguły opisane powyżej:

<div>
  <strong>Text one</strong>
  <p><strong>Text two</strong></p>
</div>

Selektor sąsiedni

Selektor sąsiedni tworzymy przez połączenie dwóch selektorów prostych znakiem “+”. Dopuszczalne jest występowanie białych znaków wokół łącznika. Selektor pasuje do elementu, który jest rodzeństwem pierwszego elementu. Elementy muszą mieć tego samego rodzica, a pierwszy z nich występować przez drugim.

p + p { color:#f00; }

Jeżeli zastosujemy powyższe reguły do następnego przykładu to formatowaniu ulegnie jedynie drugi paragraf, czyli “Paragraph two”:

<div>
  <p>Paragraph one</p>
  <p>Paragraph two</p>
</div>

Grupowanie

Zdecydowaniem się wspomnieć o grupowaniu w tym momencie, ponieważ wiele osób, które uczy się CSS popełnia błąd wiążąc grupowanie z selektorami połączonymi.

Aby zastosować identyczne reguły do elementów opisanych różnymi selektorami możemy zgrupować je używając przecinka, zamiast powtarzać deklaracje dla każdego selektora. Błąd, który popełnia wiele osób to pominięcie części selektora. Przypuśćmy, że mamy następujące znaczniki.

<div id="news">
  <h3>News</h3>
  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  </ul>
</div>

Powiedzmy, że chcemy mieć taki sam margines dla nagłówka 3 stopnia oraz listy nieuporządkowanej, ale tylko jeśli znajdują się one w elemencie div, którego id to “news”. Oto zły sposób:

div#news h3, ul {
  margin:0 2em;
}

To sprawi, że obydwa elementy, zarówno h3 i ul w warstwie div#news będą miały taki sam margines. Problem w tym, że wszystkie elementy ul w strukturze dokumentu będą miały taki margines, a nie tylko te z warstwy div#news.

Oto prawidłowy sposób grupowania selektorów dla tego przypadku:

div#news h3,
div#news ul {
  margin:0 2em;
}

Więc, jeśli grupujemy selektory, nie zapominajmy określeniu ich w całości.

Selektor atrybutu

Selektor atrybutu dopasowuje elementy na podstawie obecności lub wartości atrybutu. Istnieją cztery możliwości dopasowania selektora atrybutu:

[att]

Pasuje do elementów, które posiadają atrybut att, bez względu na jego wartość.

[att=val]

Pasuje do elementów, które posiadają atrybut att, a jego wartość wynosi dokładnie “val”.

[att~=val]

Pasuje do elementów, których wartość atrybutu att jest listą wartości rozdzielonych spacjami, a sama lista zawiera wartość “val”. W tym przypadku wartość “val” nie może zawierać spacji.

[att|=val]

Pasuje do elementów, których wartość atrybutu att jest listą wartości rozdzielonych znakiem minus, a lista ta rozpoczyna się wartością “val”. Główne zastosowanie tego rozwiązania to dopasowanie kodów języka, określonych w atrybucie lang (xml:lang w XHTML), na przykład. “en”, “en-us”, “en-gb”, itp.

A więc jakieś przykłady. Następujący selektor stosuje poniższe reguły wszystkich elementów p, które posiadają atrybut title, bez względu na jego wartość:

p[title] { color:#f00; }

W kolejnym przykładzie, selektor formatuje wszystkie elementy div, których atrybut class równa się wartości error:

div[class=error] { color:#f00; }

W przypadku dopasowywania wszystkich elementów td, których wartość atrybutu headers zawiera “col1” możemy użyć następującego selektora:

td[headers~=col1] { color:#f00; }

Ostatecznie, selektor w kolejnym przykładzie pasuje do wszystkich elementów p, których wartość atrybutu lang rozpoczyna się od wartości en:

p[lang|=en] { color:#f00; }

Kilka selektorów atrybutu może być użyte w tym samym selektorze. To sprawia, że możliwe jest dopasowywanie kilku różnych atrybutów dla tego samego elementu. Następujące reguły znalazłyby zastosowanie przy wszystkich elementach blockquote, których atrybut class jest równy dokładnie “quote” i posiadają one atrybutcite, bez względu na jego wartość:

blockquote[class=quote][cite] { color:#f00; }

Ciąg dalszy…

To już koniec części drugiej. Część 3 to ostatnia część serii artykułów na temat selektorów. Wyjaśnimy w niej selektory pseudo-klas i pseudo-elementów. W razie jakichkolwiek wątpliwości możecie przeczytać Część 1, aby lepiej zrozumieć całość.

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

Znajomość wszystkich selektorów CSS, jakie udostępnia CSS 2.1 pozwoli nam na utrzymanie porządku w kodzie HTML. Ograniczymy dzięki temu użycie zbędnych atrybutów class i dodatkowych znaczników div i span. Brzmi ciekawie?

Zatem gdzie tkwi powód rzadkiego wykorzystania wszystkich selektorów? Otóż największym powodem jest niewystarczające wsparcie ze strony Internet Explorer, łącznie z IE 6. Pozostałe nowoczesne przeglądarki obsługują selektory CSS 2.1 w całości lub w dużym stopniu. Dlatego należy być ostrożnym, ponieważ możemy mieć kłopoty z obsługą niektórych selektorów opisanych w tym artykule.

Pocieszający jest fakt, że Internet Explorer 7 oferuje dużo lepsze wsparcie dla selektorów. Mając na uwadze to, że kiedyś będziemy w stanie wykorzystać pełne możliwości selektorów, warto najpierw poznać ich przeznaczenie.

Selektorów CSS jest tak dużo, że pojedynczy artykuł byłby zbyt długi. Dla łatwiejszego znalezienia informacji artykuł został podzielony na 3 części:

1. Część 1 wyjaśnia właściwości selektorów podstawowych, w tym selektorów: uniwersalnego, typu, id i klasy.
2. Część 2 przedstawia selektory połączone, grupowanie oraz atrybuty selektorów.
3. Część 3 opisuje wykorzystanie pseudo-klas i pseudo-elementów.

Selektor podstawowy

Zacznijmy od czegoś prostego. Selektor CSS jest wzorcem, który pasuje tylko do konkretnych elementów w strukturze dokumentu. W momencie spełnienia wszystkich warunków, deklaracje i reguły są stosowane do elementu lub elementów, spełniających dany wzorzec. Rozważmy bardzo prostą regułę CSS.

p { color:#f00; }

Selektor to częścią reguł CSS, które występują przed otwierającym nawiasem klamrowym, “{“. Obecny w przykładzie selektor p, pasuje do wszystkich paragrafów w dokumencie i sprawia, że tekst paragrafów jest czerwony. Rzeczywiście nieskomplikowane.

Przegląd selektorów

Powyższy przykład był naprawdę prosty. Pozostałe selektory zamierzam opisać w dalszej części. Jednak zanim to zrobię, poniżej zamieszczam wszystkie selektory CSS 2.1 (dane zaczerpnięte z tabeli CSS 2.1, 5.1 Pattern matching):

Wszystkie spośród tych selektorów opiszę szczegółowo w dalszej części artykułu. Niektóre z określeń, występujące w powyższej tabeli, jak również w dalszej części artykułu wymagają wyjaśnienia.

potomek

Element, który jest dzieckiem, wnukiem lub kolejnym potomkiem elementu w strukturze dokumentu.

przodek

Element, który jest rodzicem, dziadkiem lub wcześniejszym przodkiem elementu w strukturze dokumentu.

dziecko

Bezpośredni potomek danego elementu. Żaden inny element nie może znajdować się pomiędzy nimi.

rodzic

Bezpośredni przodek danego elementu. Żaden inny element nie może znajdować się pomiędzy nimi.

rodzeństwo

Element, który ma tego samego rodzica, co aktualny element.

Selektory proste i połączone

Selektory dzielimy na dwie główne kategorie: selektory proste i selektory połączone.

Selektor prosty składa się z selektora typu lub selektora uniwersalnego, po którym występuje zero lub więcej atrybutów, identyfikatorów lub pseudo-klas. Poniższa reguła jest przykładem selektora prostego:

p.info { background:#ff0; }

Selektor połączony (czasami nazywany selektorem kontekstowym) składa się z dwóch lub więcej rozdzielonych selektorów prostych. Poniżej mamy prosty przykład selektora połączonego:

div p { font-weight:bold; }

Powyższa reguła znajdzie zastosowanie do wszystkich elementów p które są potomkami elementu div.

Do selektora możemy dołączyć jeden pseudo-element. W przypadku selektora połączonego, dołączany pseudo-element musi znajdować się za ostatnim selektorem prostym.

Szczegóły dotyczące selektorów połączonych, samych połączeń oraz pseudo elementów znajdziemy w części 2 oraz części 3 tej serii.

Selektor uniwersalny

Uniwersalny selektor jest reprezentowany przez gwiazdkę, “*”, tym samym pasuje do wszystkich elementów w strukturze dokumentu. Dosyć trudno znaleźć go w stylach kaskadowych, ale selektor uniwersalny jest aktualnie często wykorzystywany z selektorem klasy i identyfikatora. Jeżeli selektor uniwersalny nie jest jedynym składnikiem selektora prostego to znak “*” możemy pominąć:

• .myclass jest odpowiednikiem *.myclass
• #myid jest odpowiednikiem *#myid

Jeden z popularnych sposobów wykorzystania selektora uniwersalnego to ustawienie zerowego marginesu oraz zerowego dopełnienia dla wszystkich elementów:

* { margin:0; padding:0; }

Opisana technika nosi czasami nazwę Global White Space Reset.

Selektor typu

Selektor typu pasuje do każdego elementu danego typu w dokumencie. Poniższa reguła pasuje zatem do wszystkich paragrafów w dokumencie i ustawia rozmiar czcionki w paragrafach na 2em:

p { font-size:2em; }

Selektor klasy

Selektor klasy jest reprezentowany przez znak kropki, “.”, tym samym elementu pasujące do danej klasy posiadają atrybut class z odpowiednią wartością. Następna reguła będzie stosowana do elementów p, należących do klasy “info”:

p.info { background:#ff0; }

Możemy określić kilka klas dla danego elementu. Atrybut class przechowuje wymagane nazwy klas rozdzielone znakiem spacji. Wówczas selektor klasy będzie odnosił się jedynie do tych elementów, które mają wymienione nazwy klas. Podana niżej reguła pasuje do elementów p, które posiadają obie wartości “info” oraz “error” w atrybucie klasy:

p.info.error { color:#900; font-weight:bold; }

Uwaga: Selektory wielokrotnych klas nie działają w Internet Explorer 6, ale mają być wspierane w IE7.

Typ elementu nie musi być określony. Pozostawienie wolnego typu jest równoznaczne z użyciem selektora uniwersalnego zamiast selektora typu. Poniższa reguła będzie odnosiła się do wszystkich elementów klasy “info”, bez względu na ich typ:

.info { background:#ff0; }

Selektor identyfikatora

Selektor identyfikatora jest reprezentowany przez znak kratki, “#”, a odnosi się do elementów posiadających odpowiednią wartość atrybutu id. value. Kolejna reguła pasuje do wszystkich elementów, które mają atrybut id równy “info”, bez względu jakiego typu jest dany element:

#info { background:#ff0; }

Jeżeli dodatkowo określimy typ elementu, to reguła będzie obowiązywać tylko konkretny element.:

p#info { background:#ff0; }

Ważne jest, aby pamiętać o wyższości identyfikatora nad selektorem klasy. Wartość każdego identyfikatora musi być unikatowa w całym dokumencie, kiedy klasa może pojawić się wielokrotnie. Wówczas selektor identyfikatora stosuje się tylko do jednego elementu w strukturze dokumentu.

Ciąg dalszy…

W pierwszej części poznaliśmy podstawowe selektory. Część 2 tego artykułu zawiera szczegółowy opis selektorów połączonych, jak również grupowania i atrybutów selektorów. Część 3 pozwoli nam na poznanie właściwości pseudo-klas i pseudo-elementów.

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