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

Поиски сложных правил для псевдоклассов CSS привели меня к полезным лайфхакам селекторов атрибутов. Как, например, применить какое-то правило к ссылке, которая начинается на vk.com, без использования классов и id. Решил записать их тут, чтобы потом не искать опять.

Применить ко всем элементам, у которых есть любой параметр [data=»]

Copied!
[data-type] { color: red; }
Copied!
<div data-type="primary"></div> <div data-type="secondary"></div>

Применить ко всем элементам, у которых есть параметр [data-type=’primary’]

Copied!
[data-type='primary'] { color: red; }
Copied!
<div data-type="primary"></div>

Применить к элементам, у которых первое значение параметра data-type начинается с маленькой буквы

Copied!
[data-type='primary' s] { color: red; }

Применить к элементам, у которых значение параметра data-type начинается с указанного слова

Copied!
[атрибут^="значение"] { color: red; }

Применить к ссылкам, у которых есть указанный текст в значении href=

Copied!
[href*='example.com'] { color: red; }

Применить к ссылкам, у которых значение href= начинается с указанного текста

Copied!
[href^='https'] { color: green; }

Применить к ссылкам, у которых значение href= заканчивается на указанный текст

Copied!
[href$='.com'] { color: blue; }

Как вам статья?
+1
1
+1
3
+1
0
+1
0
+1
1
+1
0

Рекомендую почитать