CSS Урок 29 Атрибутивные Селекторы

Оформление HTML Элементов со Специфическими Атрибутами

Можно оформлять HTML элементы, которые имеют специфические атрибуты, а не только class и id.

Замечание: IE7 и IE8 поддерживают селекторы атрибутов только если указан !DOCTYPE. Выборка по атрибутам НЕ поддерживается в IE6 и более ранних версиях.

Атрибутивный Селектор

Пример ниже оформляет все элементы с атрибутом title:

Пример

[title]
{
color:blue;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Атрибутивный Селектор и Селектор по Значению

Пример ниже оформляет все элементы с title="Уроки CSS":

Пример

{
border:5px solid green;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Атрибутивный Селектор и Селектор по Значению - Несколько Значений

Пример ниже оформляет все элементы с атрибутом title, который содержит указанное значение. Это работает, даже если атрибут имеет несколько значений, разделенных пробелами:

Пример

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Пример ниже оформляет все элементы с атрибутом lang, который содержит указанное значение. Это работает даже если атрибут имеет несколько значений, разделенных дефисом ( - ):

Пример

[lang|=ru]

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Стилизация Форм

Атрибутивные селекторы в частности полезны для стилизации форм без указания class или ID:

Пример

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

© 2011 - 2022 Уроки CSS