Що таке Дочірні селектори в CSS3?

Дочірні селектори дозволяють вибрати лише ті теги, що знаходяться всередині батьківського елемента. Наприклад, у нас є код:

<p id="example">
Lorem ipsum dolor sit amet, <i>consectetur</i> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <i>Ut</i> enim ad minim veniam, <i>quis</i> nostrud exercitation ullamco laboris nisi ut aliquip <i>ex ea</i> commodo consequat.
<div>
Lorem <i>ipsum</i> dolor sit amet.
</div>
</p>

Значить, щоб вибрати всі дочірні теги i нам необхідно використовувати p > i. Таким чином буде обрано лише прямих спадкоємців. Ті теги, які знаходяться в інших елементах не використовуватимуть стилі. Варто знати: якби ми хотіли вибрати абсолютно всі теги i в тезі p, ми використовували конструкцію вкладених селекторів (p i).

#example>i { 
	color: #ccc051;
}

<p id="example">
	Lorem ipsum dolor sit amet, <i>consectetur</i> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <i>Ut</i> enim ad minim veniam, <i>quis</i> nostrud exercitation ullamco laboris nisi ut aliquip <i>ex ea</i> commodo consequat.
	<div>
		Lorem <i>ipsum</i> dolor sit amet.
	</div>
</p>