CSS селекторы по значениям атрибутов

Чуть ниже я приведу небольшую группку примеров программного кода, демонстрирующих наглядное практическое применение селекторов в CSS по значениям атрибутов HTML элементов на произвольной веб-странице.

Пример 1. Выберем поле ввода текста с идентификтором, равным значению username. Закрасим его серым.

CSS:

[id='username'] {
    background: #DDDDDD;
}

HTML:

<input type="text" id="username" value="" name="username" />
<input type="text" id="email" value="" name="email" />

Пример 2. Выберем гиперссылку на странице со значением атрибута href равным адресу моего сайта - http://druweb.ru, выделим её желтым цветом.

CSS:

a[href='http://druweb.ru'] {
    color: yellow;
}

HTML:

<a href="http://druweb.ru" target="_blank">http://druweb.ru</a>
<a href="http://wordpress.org" target="_blank">http://wordpress.org</a>

Пример 3. Выберем кнопку (элемент button) с классом login, и обведем её оранжевой рамкой толщиной в пару пикселей.

CSS:

button[class='login'] {
    border: solid 2px orange;
}

HTML:

<input type="submit" value="Войти" class="login" />
<button type="submit" class="login">Войти</button>

Ну вот и все.





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.