Przejdź do treści

CSS / Selektory atrybutów - Kurs CSS

W tym rozdziale dowiesz się...

Używanie selektorów atrybutów w arkuszach CSS.

Prosty selektor atrybutu

W jaki sposób określić formatowanie elementu, który posiada określony atrybut?

selektor[atrybut] { cecha: wartość }
Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów].

Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu języka 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 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 (od wersji 7 wszystko jest już w porządku) .

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 podanie 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

W jaki sposób określić formatowanie elementu, który posiada określony atrybut o odpowiedniej wartości?

selektor[atrybut="wartość atrybutu"] { cecha: wartość }
Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów].

Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu 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 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 (od wersji 7 wszystko jest już w porządku).

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 podanie 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

W jaki sposób określić formatowanie elementu, który posiada określony atrybut zawierający podany wyraz?

selektor[atrybut~="wyraz"] { cecha: wartość }
Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów].

Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu 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 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="To jest pogrubienie" itd.

UWAGA! Polecenie nie interpretuje MSIE 6 (od wersji 7 wszystko jest już w porządku).

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 podanie 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

Jak zmienić wygląd elementów, które mają podane atrybuty z określonymi łącznikami, np. "en-us"?

selektor[atrybut|="początek"] { cecha: wartość }
Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów].

Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu 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 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 (od wersji 7 wszystko jest już w porządku).

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.

Selektor atrybutu o wartości rozpoczynającej się od...

W jaki sposób zmienić wygląd elementu, który posiada atrybut o wartości rozpoczętej podanym tekstem?

(CSS 3 - interpretuje Internet Explorer 7.0, Firefox, Opera, Chrome)

selektor[atrybut^="początek"] { cecha: wartość }
Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów].

Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut title="...").

"Początek" to określony tekst, którym rozpoczyna się wartość atrybutu.

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Podobnie jak w przypadku selektora z łącznikami polecenie to pozwala wybrać element z atrybutem o wartości, która ma na początku wymagany tekst, ale po niej nie musi być już żadnego łącznika.

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", 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.

Selektor atrybutu o wartości kończącej się na...

W jaki sposób zmienić wygląd elementu, który posiada atrybut o wartości zakończonej podanym tekstem?

(CSS 3 - interpretuje Internet Explorer 7.0, Firefox, Opera, Chrome)

selektor[atrybut$="koniec"] { cecha: wartość }
Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów].

Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut title="...").

"Koniec" to określony tekst, którym kończy się wartość atrybutu.

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Przykład:

Jeżeli w arkuszu stylów strony została umieszczona następująca reguła:
p[title$="akapit"] { color: red }
to każdy akapit, któremu został nadany atrybut TITLE z wartością, która kończy się na "akapit", 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="to jest akapit także" (nie powinien być czerwony)

Pierwszy i drugi z podanych wyżej akapitów powinny być czerwone. Natomiast trzeci i czwarty nie.

Selektor atrybutu zawierającego określony tekst

W jaki sposób określić formatowanie elementu, który posiada określony atrybut zawierający podany tekst?

(CSS 3 - interpretuje Internet Explorer 7.0, Firefox, Opera, Chrome)

selektor[atrybut*="tekst"] { cecha: wartość }
Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów].

Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut title="...").

"Tekst" to określony napis, zawierający się w wartości atrybutu, który może zawierać również spacje.

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Działa podobnie jak selektor atrybutu z podanym wyrazem, jednak pozwala dopasować nie tylko pełne wyrazy, ale dowolną ich część (np. kilka sylab) czy nawet kilka wyrazów.

Przykład:

Jeżeli w arkuszu stylów strony została umieszczona następująca reguła:
p[title*="jest aka"] { color: red }
to każdy akapit, któremu został nadany atrybut title="..." o wartości, w której występuje tekst "jest aka", 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.

Łączenie selektorów atrybutów

Jak połączyć kilka selektorów atrybutów w jednej regule stylów CSS?

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).

Facebook