Przejdź do treści

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

📋 Zaznacz kod ▶ Edytuj na żywo

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:

📋 Zaznacz kod ▶ Edytuj na żywo

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		Poziom wsparcia
min. 2,5 roku
[atrybut]1
2008-12-11		1
2004-11-09		12
2015-07-29		9
2006-06-20		3
2007-10-26		 100%

Komentarze #

  • Soanvig
    Soanvig

    03.01.2018 11:22
    https://jsfiddle.net/23f260pe/
    Ale działa... Próbowałem jeszcze pozmieniać, np. na "lubię p" oraz "lacki", ale nadal działa
    Zobacz więcej

  • kiszuriwalilibori
    kiszuriwalilibori

    02.01.2018 22:49
    Do selektora wyboru zawierającego okreslony tekst próbowałem dodac drugi warunek, dla łatwości rwóniez dla title.
    No i okazało sie, że łapie tylko wtedy, kiedy jeden z ciągów jest podciągiem drugiego
    Czyli [...] nie łapie
    a [...] łapie
    Z czego to wynika?
    Tekst jest z kursu...
    Zobacz więcej

  • Soanvig
    Soanvig

    28.08.2017 22:50
    Javascript niestety. W CSS możesz się odnosić tylko do elementów, nie ich zawartości.
    Zobacz więcej

  • Hoinkas
    Hoinkas

    28.08.2017 21:17
    Jak musiałoby być określone polecenie by tekst, który najeżdżam myszką i wyrazy o takim samym układzie liter również się podświetlały? Potrzebuję by zastosować w tabeli, gdzie każdy człowiek jest wpisany po kilkadziesiąt razy, dla łatwiejszego zorientowania się.
    Zobacz więcej

  • CzarnYU_owca
    CzarnYU_owca

    12.09.2015 12:21
    właśnie, o co chodzi? przecież i tak będzie to samo i tak, tylko inaczej w headzie napisane, selektory, wartości i cechy i tak będą takie same
    Zobacz więcej

  • Luke
    Luke

    06.12.2013 22:58
    Dalej nie rozumiem Twojego problemu. Przecież składnia jest taka sama.
    Zobacz więcej

  • Bubu
    Bubu

    06.12.2013 22:46
    Prawda, prawda, ale uważam, że każdy etap poradnika powinien zostać wytłumaczony na zewnętrznym i wewnętrznym arkuszu CSS. Są tacy, którzy nie preferują stylu wewnętrznego, ponieważ wolą pewną hierarchię i ład w kodowaniu.
    Zobacz więcej

  • Luke
    Luke

    06.12.2013 22:04
    Pomiędzy wewnętrznym a zewnętrznym arkuszem CSS jest tylko jedna różnica, a mianowicie arkusz wewnętrzny znajduje się pomiędzy znacznikami <style> i </style>, a zewnętrzny jest w osobnym pliku. Składnia jest taka sama.
    Zobacz więcej

  • Bubu
    Bubu

    06.12.2013 21:46
    Czy każdy etap w poradniku jest pokazany na wewnętrznym arkuszu CSS? Kurcze, bo już zdążyłam się przyzwyczaić do zewnętrznego. :(
    Zobacz więcej

  • Sobak
    Sobak

    03.09.2012 16:33
    Być może kED używa w podglądzie jakiejś starej wersji IE, która nie obsługuje tej możliwości?
    Zobacz więcej

Zobacz więcej komentarzy

Facebook