Selektory atrybutów CSS
Używanie selektorów atrybutów w arkuszach CSS.
Prosty selektor atrybutuW jaki sposób określić formatowanie elementu, który posiada określony atrybut?
- 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 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 atrybutu zawierającego łączniki
Jak zmienić wygląd elementów, które mają podane atrybuty z określonymi łącznikami, np. "en-US"?
- 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?
- 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?
- 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?
- Łączenie selektorów atrybutów
Jak połączyć kilka selektorów atrybutów w jednej regule stylów CSS?
PowtórkaCSS
Prosty selektor atrybutu
W jaki sposób określić formatowanie elementu, który posiada określony atrybut?
selektor[atrybut] { cecha: wartość }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 nazwy atrybutów 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).
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
[atrybut] | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 9 2006-06-20 | 3 2007-10-26 |
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ść }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 nazwy atrybutów 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.
Przeglądarki
Chrome | Firefox | Edge | Opera | Safari | |
|---|---|---|---|---|---|
[atrybut="wartość atrybutu"] | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 9 2006-06-20 | 3 2007-10-26 |
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ść }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 nazwy atrybutów 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).
Przeglądarki
Chrome | Firefox | Edge | Opera | Safari | |
|---|---|---|---|---|---|
[atrybut~="wyraz"] | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 9 2006-06-20 | 3 2007-10-26 |
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ść }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 nazwy atrybutów 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.
Przeglądarki
Chrome | Firefox | Edge | Opera | Safari | |
|---|---|---|---|---|---|
[atrybut|="początek"] | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 9 2006-06-20 | 3 2007-10-26 |
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: Chrome 4, Firefox 3.5, Edge 12, Opera 10, Safari 3.2)
selektor[atrybut^="początek"] { cecha: wartość }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: Chrome 4, Firefox 3.5, Edge 12, Opera 10, Safari 3.2)
selektor[atrybut$="koniec"] { cecha: wartość }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: Chrome 4, Firefox 3.5, Edge 12, Opera 10, Safari 3.2)
selektor[atrybut*="tekst"] { cecha: wartość }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ą atrybutclass 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).
Powtórka
Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.