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

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

Трапляється, що у HTML-коді на одній сторінці одночасно зустрічаються теги <a> із власними класами, а також без них. А задача стоїть стилізувати саме останні, не торкаючись посилань із класом.

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

<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;
}

Результат:

Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *