xandeadx.ru Блог музицирующего веб-девелопера

CSS → Селекторы по атрибутам

Опубликовано в

Постоянно забываю селекторы по атрибутам из CSS3. Перевёл часть доки w3c, чтобы всегда была под рукой.

E[foo]

Элемент E с существующим атрибутом foo.

a[title] { color:red; }

<a>Link 1</a>
<a title="Title">Link 2</a>
<a>Link 3</a>

E[foo="bar"]

Элемент E у которого атрибут foo равен bar.

a[href="/url/2"] { color:red; }

<a href="/url/1">Link 1</a>
<a href="/url/2">Link 2</a>
<a href="/url/3">Link 3</a>

E[foo~="bar"]

Применяется к элементам E, у которых атрибут foo содержит параметры разделённые пробелом и один из этих параметров равен bar, либо foo в точности равен bar.

a[title~="hello"] { color:red; }

<a title="hello world">Link 1</a>
<a title="world hello">Link 2</a>
<a title="world">Link 3</a>
<a title="hello">Link 4</a>

E[foo^="bar"]

Элемент E у которого атрибут foo начинается с bar или равен bar.

a[title^="hello"] { color:red; }

<a title="hello world">Link 1</a>
<a title="world hello">Link 2</a>
<a title="world">Link 3</a>
<a title="hello">Link 4</a>

E[foo$="bar"]

Элемент E у которого атрибут foo заканчивается на bar или равен bar.

a[title$="hello"] { color:red; }

<a title="hello world">Link 1</a>
<a title="world hello">Link 2</a>
<a title="world">Link 3</a>
<a title="hello">Link 4</a>

E[foo*="bar"]

Элемент E у которого атрибут foo содержит bar или равен bar.

a[title*="hello"] { color:red; }

<a title="hello world!">Link 1</a>
<a title="helloWorld">Link 2</a>
<a title="hello">Link 3</a>
<a title="world">Link 4</a>

E[foo|="bar"]

Применяется к элементам E, у которых атрибут foo содержит параметры разделённые дефисом и первый из этих параметров равен bar, либо foo в точности равен bar.

a[title|="hello"] { color:red; }

<a title="hello-world">Link 1</a>
<a title="world-hello">Link 2</a>
<a title="hello">Link 3</a>
<a title="world">Link 4</a>

E[..][..]

Селекторы по атрибутам можно совмещать, например:

a[href^="/path/"][rel="tag"] { color:red; }

<a href="/path/to/file" rel="tag">Link 1</a>
<a href="/other/url" rel="tag">Link 2</a>
<a href="/path/to/file">Link 3</a>
Написанное актуально для CSS3
Похожие записи

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании