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

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

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

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

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

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

<div data-type="primary"></div>

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

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

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

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

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

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

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

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

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

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