Prosty selektor atrybutu
(interpretuje Internet Explorer 7.0, Netscape 6/Mozilla/Firefox, Opera 5)
selektor[atrybut] { cecha: wartość }
Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu języka (X)HTML (np. atrybut
title="...").Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.
Polecenie to może zostać wykorzystane dla elementów, którym z poziomu (X)HTML został nadany określony atrybut (przy czym jego wartość nie ma znaczenia). Pozwala nadać konkretne cechy elementom, które posiadają właśnie taki atrybut. Na przykład znacznik może być automatycznie napisany czcionką koloru czerwonego, jeśli ma nadany atrybut title="..." (który powoduje wyświetlenie tekstu informacji, po wskazaniu myszką). W tym przypadku nie ma znaczenia jaką wartość ma atrybut, ważne jest jedynie, aby został on nadany.
UWAGA! Polecenie nie interpretuje MSIE 6.
W języku XHTML wszystkie atrybuty w selektorach muszą być pisane małymi literami.
Przykład:
Jeśli w arkuszu stylów strony została umieszczona następująca reguła:
p[title] { color: red }
to każdy akapit, któremu został nadany atrybut title="...", powinien mieć kolor czerwony:
To jest akapit, któremu został nadany atrybut TITLE (aby to sprawdzić, wskaż go myszką) i dlatego powinien być koloru czerwonego.
Dla porównania, to jest inny akapit bez atrybutu TITLE.
Pierwszy z podanych wyżej akapitów powinien być czerwony, a drugi nie. Jeśli używasz Internet Explorera 6, żaden akapit nie będzie czerwony.
Dozwolone jest podane kilku atrybutów. Wtedy element musi posiadać wszystkie z nich, aby otrzymał formatowanie:
p[title][lang] { color: red }
To jest akapit z atrybutem TITLE oraz LANG (powinien być czerwony).
To jest akapit tylko z atrybutem TITLE (nie powinien być czerwony).
Selektor atrybutu o określonej wartości
(interpretuje Internet Explorer 7.0, Netscape 6/Mozilla/Firefox, Opera 5)
selektor[atrybut="wartość atrybutu"] { cecha: wartość }
Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu (X)HTML (np. atrybut
title="...")."Wartość atrybutu" to określona wartość, która została nadana temu atrybutowi (np. treść atrybutu
title="...").Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.
Polecenie to może zostać wykorzystane dla elementów, którym z poziomu (X)HTML został nadany atrybut, który ma określoną wartość. Pozwala nadać konkretne cechy elementom, które posiadają atrybut, właśnie z taką dokładnie wartością. Na przykład znacznik może być automatycznie napisany czcionką koloru czerwonego, jeśli ma nadany atrybut title="...", o wartości podanej w deklaracji stylu. Znaczniki z atrybutem title="..." o innej wartości nie będą już czerwone.
UWAGA! Polecenie nie interpretuje MSIE 6.
W języku XHTML wszystkie atrybuty w selektorach muszą być pisane małymi literami.
Przykład:
Jeżeli w arkuszu stylów strony została umieszczona następująca reguła:
p[title="To jest akapit"] { color: red }
to każdy akapit, któremu został nadany atrybut title="..." o wartości "To jest akapit", powinien mieć kolor czerwony:
To jest akapit, któremu został nadany atrybut TITLE o wartości "To jest akapit" (aby to sprawdzić, wskaż go myszką) i dlatego jest koloru czerwonego.
Dla porównania, to akapit bez atrybutu TITLE.
A to jest akapit z atrybutem TITLE o innej wartości niż w regule stylu.
Pierwszy z podanych wyżej akapitów powinien być czerwony, a drugi i trzeci nie. Jeśli używasz Internet Explorera 6, żaden akapit nie będzie czerwony.
Dozwolone jest podane kilku atrybutów. Wtedy element musi posiadać wszystkie z nich i każdy musi mieć przypisaną wyszczególnioną wartość, aby otrzymał formatowanie:
p[title="To jest akapit"][lang="pl"] { color: red }
To jest akapit, któremu został nadany atrybut title="To jest akapit" oraz lang="pl" (powinien być czerwony).
To jest akapit, któremu został nadany atrybut title="Akapit" oraz lang="pl" (nie powinien być czerwony).
Inne przydatne zastosowanie tego selektora to np. zmiana sposobu formatowania elementów formularzy. Niemal wszystkie kontrolki formularza są tworzone przy użyciu znacznika <input type="..." />. O tym jaki rodzaj pola zobaczymy na ekranie, decyduje atrybut type="...". Jeśli chcielibyśmy zmienić rodzaj obramowania dla wszytkich pól tekstowych (type="text"), tak aby nie wpłynęło to na pola innego typu (np. na przycisk wysłania formularza - type="submit"), należałoby wpisać np. taką regułę:
input[type="text"] { border: 1px solid black }
Niestety również ta deklaracja nie jest interpretowana przez MSIE 6 :-(. Jedynym rozwiązaniem problemu wydaje się użycie klasy selektorowej dla każdego pojedynczego znacznika pola tekstowego w formularzu. Wtedy przynajmniej będzie można określić wszystkie własności formatowania elementu w jednym miejscu (arkuszu stylów), co znacznie ułatwi i przyspieszy ewentualne późniejsze modyfikacje.
Selektor atrybutu zawierającego określony wyraz
(interpretuje Internet Explorer 7.0, Netscape 6/Mozilla/Firefox, Opera 5)
selektor[atrybut~="wyraz"] { cecha: wartość }
Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu (X)HTML (np. atrybut
title="..."), którego wartość składa się z wyrazów rozdzielonych spacjami."Wyraz" to określone słowo, zawierające się w wartości atrybutu, które nie może zawierać spacji.
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.
Polecenie to może zostać wykorzystane dla elementów, którym z poziomu (X)HTML został nadany atrybut, o wartości składającej się z kilku wyrazów rozdzielonych spacjami. Deklaracja taka pozwala nadać konkretne cechy elementom, posiadającym atrybut, w którego wartości występuje podany wyraz (oprócz niego mogą występować tam również inne wyrazy). Wyraz nie może zawierać spacji! Na przykład deklaracja title~="jest" kojarzy atrybuty: title="To jest akapit" lub title="Tojest pogrubienie" itd.
UWAGA! Polecenie nie interpretuje MSIE 6.
W języku XHTML wszystkie atrybuty w selektorach muszą być pisane małymi literami.
Przykład:
Jeżeli w arkuszu stylów strony została umieszczona następująca reguła:
p[title~="jest"] { color: red }
to każdy akapit, któremu został nadany atrybut title="..." o wartości, w której występuje wyraz "jest", powinien mieć kolor czerwony:
To jest akapit, któremu został nadany atrybut TITLE o wartości "To jest akapit" (aby to sprawdzić, wskaż go myszką) i dlatego jest koloru czerwonego.
A to jest akapit z atrybutem TITLE o wartości "To też jest akapit" i też powinien być czerwony.
Dla porównania, to jest akapit bez atrybutu TITLE.
A to jest akapit z atrybutem TITLE o wartości, w której nie występuje wyraz "jest" (również nie jest czerwony).
Pierwszy i drugi z podanych wyżej akapitów powinny być czerwone. Natomiast trzeci i czwarty - nie. Jeśli używasz Internet Explorera 6, żaden akapit nie będzie czerwony.
Dozwolone jest podane kilku atrybutów lub/i wyrazów. Wtedy element musi posiadać wszystkie z nich i każdy musi zawierać wyszczególniony wyraz, aby otrzymał formatowanie:
p[title~="jest"][lang~="pl"] { color: red }
To jest akapit, któremu został nadany atrybut title="To jest akapit" i lang="pl" (powinien być czerwony).
To jest akapit, któremu został nadany atrybut title="Akapit" i lang="pl" (nie powinien być czerwony).
p[title~="jest"][title~="akapit"] { color: red }
To jest akapit, któremu został nadany atrybut title="To jest akapit" (powinien być czerwony).
To jest akapit, któremu został nadany atrybut title="akapit" (nie powinien być czerwony).
Selektor atrybutu zawierającego łączniki
(interpretuje Internet Explorer 7.0, Netscape 6/Mozilla/Firefox, Opera 5)
selektor[atrybut|="początek"] { cecha: wartość }
Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu (X)HTML (np. atrybut
lang="..."), którego wartość składa się z wyrazów rozdzielonych łącznikami (myślnikami)."Początek" to określony wyraz, od którego rozpoczyna się wartość atrybutu.
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.
Polecenie to może zostać wykorzystane dla elementów, którym z poziomu (X)HTML został nadany atrybut, o wartości składającej się z kilku wyrazów rozdzielonych łącznikami (myślnikami). Reguła taka pozwala nadać konkretne cechy elementom, posiadającym atrybut, którego wartość rozpoczyna się od podanego wyrazu. Na przykład składnia lang|="en" kojarzy atrybuty: lang="en-us" lub lang="en-au", jak również lang="en".
Selektor taki został przewidziany do obsługi języków (atrybut LANG), których skróty zawierają często łączniki (np. "en-us" to język angielski w Stanach Zjednoczonych, "en-au" to język angielski w Australii).
UWAGA! Polecenie nie interpretuje MSIE 6.
W języku XHTML wszystkie atrybuty w selektorach muszą być pisane małymi literami.
Przykład:
Jeżeli w arkuszu stylów strony została umieszczona następująca reguła:
p[title|="to"] { color: red }
to każdy akapit, któremu został nadany atrybut TITLE z wartością, która rozpoczyna się od "to" (i może składać się z łączników), powinien mieć kolor czerwony:
To jest akapit, któremu został nadany atrybut title="to-jest-akapit" (aby to sprawdzić, wskaż go myszką) i dlatego jest koloru czerwonego.
A to jest akapit z atrybutem title="to-też-jest-akapit" i też powinien być czerwony.
Dla porównania, to jest akapit bez atrybutu TITLE.
A to jest akapit z atrybutem title="także-i-to-jest-akapit" (nie powinien być czerwony)
Pierwszy i drugi z podanych wyżej akapitów powinny być czerwone. Natomiast trzeci i czwarty nie. Jeśli używasz Internet Explorera 6, żaden akapit nie będzie czerwony.
Łączenie selektorów atrybutów
Wszystkie z opisanych w tym rozdziale selektorów można łączyć, podając je w regule stylów kolejno po sobie (bez żadnych odstępów). W takim przypadku, aby wybrany element otrzymał określone formatowanie, musi posiadać wszystkie z wyszczególnionych atrybutów z ewentualnymi przypisanymi określonymi wartościami.
Przykład:
Przypisujemy czerwony kolor czcionki akapitom, które posiadają atrybut class o dowolnej wartości, dir="ltr", title z wyrazem akapit oraz lang rozpoczynający się od pl z ewentualnymi łącznikami:
p[class][dir="ltr"][title~="akapit"][lang|="pl"] { color: red }
Ten akapit posiada następujące atrybuty: class, dir="ltr", title="To jest akapit" lang="pl" (powinien być czerwony).
Ten akapit posiada następujące atrybuty: class, dir="ltr", lang="pl" (nie powinien być czerwony).