Стилизиране на HTML елементи със специфични атрибути

Можем да стилизираме HTML елементите, не само по клас или по id, а по това какви атрибути имат.
Забележка: IE7 и IE8 поддържа атрибут селекторите, само ако е определен <DOCTYPE!>.

CSS [атрибут] Selector

[атрибут] селектора се използва, за да хванем всички елементи с определен атрибут. Следващият пример избира всички <a> елементи с target атрибут:

CSS [атрибут = стойност] Selector

[атрибут = стойност] селектора се използва, за да хванем елементи с определен атрибут и стойност. Следващият пример избира всички <a> елементи с target=“_blank“:

CSS [атрибут ~ = стойност] Selector

[атрибут ~ = стойност] селектора се използва, за да хванем елементи с определен атрибут, чиято стойност съдържа определена дума. Следващият пример избира всички елементи със title атрибут, на който поне една от думите в стойността му е „цвете“:

Примерът по-горе ще прихване елементи със title = „цвете“, title = „лято цвете“ и title = „цвете ново“, но не и title = „ми-цвете“ или title = „цветя“.

CSS [атрибут | = стойност] Selector

[атрибут | = стойност] селектор се използва, за да изберем всички елементи с атрибут, който започва с определена дума. Следващият пример избира всички елементи със class атрибут, който започва с „top“: Забележка: Стойността трябва да е цяла дума, като клас = „отгоре“, или последвана от тире (-), като клас = „отгоре-текст“!

CSS [атрибут ^ = стойност] Selector

[атрибут ^ = стойност] селектора се използва, за да прихванем елементи, с определен атрибут, който започва с определена стойност. Следващият пример избира всички елементи със class атрибут, чиято стойност започва с „отгоре“:
Забележка: Стойността не трябва да бъде цяла дума!

CSS [атрибут $ = стойност] Selector

[атрибут $ = стойност] селектора се използва, за да изберем елементи, чиито стойност на атрибута завършва с определена дума. Следващият пример избира всички елементи със class атрибут, който завършва с „тест“: Забележка: Стойността не трябва да бъде цяла дума!

CSS [атрибут * = стойност] Selector

The [атрибут * = стойност] селектора се използва, за да изберете елементи, чиято стойност на атрибута съдържа определена стойност. Следващият пример избира всички елементи със class атрибут, който съдържа „ТЕ“: Забележка: Стойността не трябва да бъде цяла дума!

Стилизиране на Forms

Атрибут Селекторите са много полезни при стилизирането на HTML формуляри. Така могат да се прихващат различните елементи без да използваме класове или id-та:

Още примери за CSS селектори

Използвайте този CSS Selector Tester за да си поиграете с различните селектори. За пълна справка за всички CSS селектори, погледнете CSS справка за Селектори.