HTML-верстка: инструменты и приемы профессиональной front-end разработки

Выборка атрибутов


назад вперед

Стилизация html-элементов с заданным атрибутом

В CSS есть возможность стилизовать HTML-элементы, используя не только class и id, но и заданные атрибуты.

Заметка: Internet Explorer 7 (и выше) поддерживает выборку атрибутов, только если указан !DOCTYPE. В IE6 и более ранних версиях выборка атрибутов не работает.


Выборка атрибутов

Посмотрите на следующий пример, в котором мы стилизуем элементы с атрибутом title:

Пример

[title]
{
color:blue;
}

Посмотреть


Выборка атрибута с заданным значением

В этом примере мы рассмотрим оформление всех элементов с атрибутом title="audi":

Пример

[title=audi]
{
border:5px solid green;
}

Посмотреть


Множественный выбор по атрибуту и его значению

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

Пример

[title~=hello]
{
color:blue;
}

Посмотреть

Еще один пример, в котором стилизуются все элементы с атрибутом lang, имеющим заданное значение. Этот пример работает даже в том случае, если значение атрибута разделено дефисом ( - ):

Пример

[lang|=en]
{
color:blue;
}

Посмотреть


Оформление форм

Выборка атрибутов очень удобна при оформлении форм ввода, если вы не хотите использовать 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;
}

Результатом данного примера будет то, что фоном текстового поля будет желтый цвет, а кнопка подтверждения формы будет менять цвет рамки на желтый.



Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта