Урок №7. Селектор с атрибутом

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

Для того, чтобы задать стиль тэгу, с наличием определнного атрибута, в селекторе, после объявления тэга и возможно его класса, идентификатора, нужно написать квадратныек скобки и внутри них название этого атрибута.

Например зададим определенный стиль тэгу <img>, который имеет атрибут title, HTML-код:

<p>Картинка с title: <img src="/images/ryba.jpg" title="rybka"></p>
<p>Картинка без title: <img src="/images/ryba.jpg"></p>

CSS-код:

img[title] {padding:10px; background: #333333;}  /* стиль для img с наличием title, отступы и на этих отступах темно-серый фон */

Вот как это будет выглядеть:

Если же вы хотите задавать стиль только тем тэгам, у которых атрибут равен определнному значению, в квадратных скобках название атрибута нужно приравнять к этому значению. Рассмотрим пример, где мы хотим задать всем <input>, которые в качестве значения атрибута type имееют text.

HTML-код:

<input type="text" value="Имя" />
<input type="submit" value="Отправить" />
<input type="text" value="Фамилия" />

CSS-код:

input[type=text] {padding:10px; border:#FF9900 2px dotted;} /* стиль для input с type="text" */

Вот как это выглядит: