Вы здесь: Главная > CSS > Селекторы атрибутов

Селекторы атрибутов

Опубликовано автором Просмотры: 0

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

Селекторы атрибутов позволяют вам стилизовать поле элемента на основе наличия атрибута HTML или значения атрибута.

С помощью атрибута…

Добавляя имя атрибута, заключённое в квадратные скобки, для оформления чего-либо, что просто содержит определённый атрибут, вы можете сделать что-то вроде этого:

abbr[title] { border-bottom: 1px dotted #ccc }

По сути, это говорит о том, что “проведите пунктирную линию под всеми сокращениями с title атрибутом”.

С атрибутом и его значением…

Далее вы можете указать, что хотите придать чему-либо стиль с определённым значением атрибута.

input[type=text] { width: 200px; }

В этом примере ширина 200 пикселей будет применена только к input элементам, которые указаны как текстовые поля

<input type="text">

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

Вы также можете настроить таргетинг на несколько атрибутов одновременно способом, аналогичным следующему:

input[type=text][disabled] { border: 1px solid #ccc }

Это применит серую рамку только к текстовым вводам, которые отключены.

CSS 3 также позволяет вам сопоставлять атрибуты, не будучи точными:

[attribute^=something]

будет соответствовать значению атрибута, который начинается с чего-либо.

[attribute$=something]

будет соответствовать значению атрибута, который заканчивается чем-то.

[attribute*=something]

будет соответствовать значению атрибута, который содержит что-либо, будь то в начале, середине или конце.

Итак, в качестве примера, вы могли бы оформить внешние ссылки (например. “https://foxyforex.ru”) иначе, чем внутренние ссылки (например. “overhere.html») следующим образом:

a[href^=http] {
    padding-right: 10px;
    background: url(arrow.png) right no-repeat;
}

Страницы в тему:

Добавить комментарий