Не могу понять синтаксис CSS - селекторов

Question

По сути, селектор .класс {} это правильный синтаксис, он у меня всегда работал, но вот столкнулся с проблемой: хочу применить text-decoration: none для a.top_menu. Не получается. Погуглил, сказали написать .top_menu a {text-decoration: none}. Всё заработало... Попробовал такой синтаксис применить ко всему css, чтобы не запутаться и везде одинаково писать, но такой вариант у других селекторов с классами не сработал. В чём фишка, объясните, пожалуйста.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <title>Flat</title>
</head>
<body>
  <div class="header">
    <div class="logo">
      <img class="logo" src="assets/images/logo.png" alt="">
      <div class="M_logo">M</div>
      <div class="inimal_logo">inimal</div>
    </div>
    <nav class="top_menu">
      <a href="#">Products</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </nav>
  </div>
</body>
</html>

body {
  margin: 0;
}

div.header {
  width: 100%;
  max-width: 1680px;
  height: 100px;
  position: relative;
}

div.logo {
  width: 184px;
  max-width: 184px;
  height: 61px;
  margin-top: 20px;
  margin-left: 164px;
  position: relative;
}

div.M_logo {
  font-family: 'Roboto', sans-serif;
  font-size: 43px;
  display: inline-block;
  position: absolute;
  left: 5px;
  top: 5px;
  color: #fff;
}

div.inimal_logo {
  display: inline-block;
  font-size: 43px;
  font-family: 'Roboto', sans-serif;
  position: absolute;
  top: 5px;
  padding-left: 8px;
  color: #038c8c;
}

nav.top_menu {
  font-size: 19px;
  display: inline-block;
  position: absolute;
  right: 300px;
  top: 18px;
  font-family: 'Roboto', sans-serif;
}

.top_menu a {
  text-decoration: none;
}

Answer 1

Селекторы работают очень просто, посмотрите на селектор .top_menu и посмотрите что он включает в себе, чтобы более наглядно было

Вот что включает ваш селектор в том виде в котором вы его записали:

<nav class="top_menu">
  <a href="#">Products</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

чтобы понять как это работает приведу пример, если вы укажите к примеру .header a {} то селектор будет работать для всех елементов ниже уровня header то есть:

<div class="header">
  <div class="logo">
    <img class="logo" src="assets/images/logo.png" alt="">
    <div class="M_logo">M</div>
    <div class="inimal_logo">inimal</div>
  </div>
  <nav class="top_menu">
    <a href="#">Products</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>
</div>

то есть смотрите на html в этом ключе как на дерево, а селектор это уровень дерева с которого он начинает действовать для вложенных элементов ;)

ваше желание будет выглядеть так:

.header a {text-decoration: none}

или вот так:

body a {text-decoration: none}

тэг указывается без знаков, к примеру вас интересует верхний узел body вы так и пишите, с точкой указываются селекторы по классу, с # селекторы по айди, к примеру:

<body id="body">
  <div class="header">
    <div class="logo">
      <img class="logo" src="assets/images/logo.png" alt="">
      <div class="M_logo">M</div>
      <div class="inimal_logo">inimal</div>
    </div>
    <nav class="top_menu">
      <a href="#">Products</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </nav>
  </div>
</body>

можно записать селектор вот так

#body a {text-decoration: none}

теперь что касается самого выражения, ваше выражение говорит следующее, взять все элементы у которых класс указан как top_menu далее у всех этих веток дерева взять все элементы с тегом <a> и задать им свойства.

Answer 2

Комбинаций селекторов не так много, можно просто запомнить:

a.top_menu — без пробела (одновременное наличие чего-либо):
«Все теги a у которых есть класс .top_menu»

.top_menu a — через пробел:
«Все теги a которые находятся где-то внутри элемента с классом top_menu»
На любом уровне вложенности.

.top_menu > a:
«Все теги a непосредственно внутри top_menu (1-й уровень вложенности)»

.top_menu + a:
«Тег a, который расположен сразу после top_menu».
Между ними могут быть пробелы и текст, но не другие теги.

.top_menu ~ a:
«Один или несколько a, расположенные где-то после top_menu»
Между ними могут быть и другие теги, но все они - на одном уровне вложенности.

Справка → https://webref.ru/css#selectors

P.s. Естественно, вместо селектора тега <a> — там может быть название другого класса.

P.p.s. Они не обязательно должны быть только парами:

input[type="radio"]:checked + .moo { color: red; }

/* class="moo", который сразу после элемента с тремя одновременными признаками:
   (без пробелов) тег - input, тип - radio, отмечен (:checked) */

<input type="radio" checked name="x"> <span class="moo">1</span> <br>
<input type="radio" name="x"> <span class="moo">2</span> <br>
<input type="radio" name="x"> <span class="moo">3</span>

БЛОГ НА HUSL

Не могу понять синтаксис CSS - селекторов

Ответы (2 шт):