Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

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-2017 Уроки CSS
Рейтинг@Mail.ru