Значение данного символа >?

Подскажите, пожалуйста, какой функционал, иными словами, для чего несет в себе символ > в css?
Вот один из примеров, с которым столкнулся.
.box > div:hover { 
        width: 200px;
      }

В каких случаях необходимо использовать этот символ?
  • Вопрос задан
  • 2345 просмотров
Решения вопроса 2
@holfza
<div class="box">
	<div id="test">
		<div></div>
	</div>
</div>

В вашем примере, при наведении на .box у блока #test станет ширина 200px.
А если так:
.box div:hover
То стиль унаследуется и у блока div, который находится в блоке #test.
denweb.ru/css/selektory-css.html
Ответ написан
KorsaR-ZN
@KorsaR-ZN
Если проще всего сказать, то DOM - это дерево какой-то вложенности, то такая конструкция, как у Вас, означает следующее, что будет выбран элемент вложенности current + 1.
A > B
т.е свойство будет применено ТОЛЬКО к элементу B, который находится внутри элемента А, не дальше одного уровня вложенности :)

P.S Чет проще не получилось, ну из примеров предыдущих ответов и моего, должно стать все ясно :D
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Это значит "непосредственный потомок", проще на примере объяснить
<div class="box">
    <div class="child">
    </div>
    <div class="child">
        <div class="child_2">
        </div>
    </div>
</div>

В вашем примере, все блоки с классом child удовлетворяют условию, а вот уже child_2 выпадает из выборки.

А вообще тут больше информации htmlbook.ru/samcss/dochernie-selektory
Ответ написан
nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy
Добавлю свои пять копеек.
Вообще все актуальные селекторы в удобном виде и совместимостью с браузерами. everstudent.ru/blog/htmlcss/30-css-seletors-to-memorize
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы