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

Question

[Андрей]

Подскажите, пожалуйста, какой функционал, иными словами, для чего несет в себе символ > в css?
Вот один из примеров, с которым столкнулся.

.box > div:hover { 
        width: 200px;
      }

В каких случаях необходимо использовать этот символ?

Answer 1

[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

Answer 2

[KorsaR-ZN]

Если проще всего сказать, то DOM - это дерево какой-то вложенности, то такая конструкция, как у Вас, означает следующее, что будет выбран элемент вложенности current + 1.
A > B
т.е свойство будет применено ТОЛЬКО к элементу B, который находится внутри элемента А, не дальше одного уровня вложенности :)

P.S Чет проще не получилось, ну из примеров предыдущих ответов и моего, должно стать все ясно :D

Answer 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

Answer 4

[IceJOKER]

htmlbook.ru/samcss/dochernie-selektory

Answer 5

[Николай Шабалин]

Добавлю свои пять копеек.
Вообще все актуальные селекторы в удобном виде и совместимостью с браузерами. everstudent.ru/blog/htmlcss/30-css-seletors-to-memorize