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

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

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

Copied![data-type] {
  color: red;
}
[data-type] {
  color: red;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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