Selektory CSS 2.1 – część 2

Ten artykuł to druga część serii trzech artykułów, które opisują selektory dostępne w CSS 2.1. Część 1 dotyczy podstawowych zagadnień, czyli selektorów typu i klasy, jak również selektorów prostych i selektora uniwersalnego.

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.