Что такое CSS Attribute Selector?
CCS дает нам возможность стилизовать элементы базирующиеся на атрибутах ссылки, а не на типе самого элемента. Например, вы уже знаете как украсить элемент заголовка h1:
h1 { color: blue; }Можно немного четче определить атрибут заголовка:
h1[title] { color: blue; }Можем зайти еще дальше:
h1[title="Go Home"] { color: blue; } /* Значение "Go Home" в атрибуте заголовка */
h1[title~="Go Home"] { color: red; } /* Значение "Go Home" где-то в атрибуте заголовка */
h1[title^="Go Home"] {color: green; } /* Значение атрибута заголовка начинается с "Go Home" */Что уникального в «мыльных» ссылках?
А теперь возьмем опыт из предыдущих примеров и соорудим вот это:
a[href^="mailto"]:hover:after { content: attr(title); }Атрибут заголовка мы поставили в hover. Это будет работать, однако может получится что текст появится сразу-же после ссылки. Поэтому правим код на это:
a[href^="mailto"]:hover:after { content: " > " attr(title); }Что получилось:
[пример]
[*] будет к месту уточнить что, наш любимый браузер, — IE некорректно отображает код, впрочем, мы привыкли.