Як стилізувати лише посилання без класу [CSS]

Привіт:) У цьому короткому, але корисному гіді покажу, як правильно застосувати CSS-стилі тільки до тих посилань <a>, які не мають класу, не зачіпаючи інші, стилізовані через класи.

Навіщо це потрібно?

Під час розробки сайту трапляються ситуації, коли:

• частина посилань оформлюється через специфічні класи;
• інші — лишаються "чистими", тобто без класу;
• потрібно стилізувати тільки ті, що без класу, наприклад, автоматично згенеровані CMS, контент із редактора або сторонній контент.

Це зручно, коли нема змоги додати клас вручну, але потрібно все одно задати базовий стиль.

Реалізацію покажу одразу на прикладі. Нехай є розмітка

<a class="top-menu__item" href="#">Page 1</a>
<a class="footer-menu__item" href="#">Page 2</a>
<a href="#">Page 3</a>

У ній лише перші два теги <a> мають класи. Щоб доступитися до останнього, можна просто виключити селектор за атрибутом "class".

.top-menu__item {
  color: red;
  font-size: 16px;
}

.footer-menu__item {
  color: black;
  font-size: 25px;
}

/* Посилання без класу */
a:not([class]) {
  color: green;
  font-size: 45px;
}

Результат:

• Page 1 — червоний, 16px;
• Page 2 — чорний, 25px;
• Page 3 — зелений, 45px, бо він без класу.

Як це працює?

Селектор a:not([class]) означає:

"застосуй стиль до всіх тегів <a>, які не мають атрибуту class взагалі".

Це:

• не зачіпає посилання з будь-яким класом;
• гарантовано працює, навіть якщо клас порожній (class="" — не пройде, бо атрибут уже є);
• працює у всіх сучасних браузерах.

Уточнення: що не враховується?

<a class="" href="#">Empty class</a> <!-- не буде стилізовано! -->

Посилання з class="" не потрапить під селектор :not([class]), бо атрибут існує. Якщо потрібно охопити і ці, можна використати:

a:not([class]), a[class=""] {
  /* стилі для безкласових посилань */
}

Або більш універсально:

a:not([class*=""]) {
  /* стиль лише для тих, які без класу взагалі або з порожнім класом */
}