Что такое CSS-селектор для выбора первого непосредственного дочернего элемента?

Question

Например, если я хочу первый <div> внутри элемента <p>, какой селектор использовать?

Чтобы получить все <div> s в <p> элемента, я хотел бы сделать:

p > div 

в CSS.

Как я мог выполнить это, только получив первый <div>?

Answer 1

Селектор first-child позволяет сразу нацеливать первый элемент внутри другого элемента.

<p> 
    <div>First child...</div> 
    <div>Second...</div> 
    <div>Third...</div> 
    <div>Fourth...</div> 
</p> 

В CSS:

p > div:first-child { 
    font-size: 1.5em; 
} 

Редактировать: Важное замечание в том, что вы никогда не должны использовать div внутри p. Я написал этот код, чтобы показать вам, как выбрать первого ребенка в вашем случае, но действительно так плохо использовать div внутри p. Всякий раз, когда вы используете <div> между <p> и </p>, как (например) это:

<p> <div></div> </p> 

браузер будет пытаться исправить (чтобы быть действительным кодом) это следующим образом:

<p></p> <div></div> <p></p> 

Успехов!

Answer 2

Если вы используете p > div в качестве тегов, то селектор будет p > div:first-child

Он находит р теге самый первый Див.