Какой CSS-селектор можно использовать для выбора первого div в другом div

У меня есть что-то вроде:

<div id="content>

   <h1>Welcome to Motor City Deli!</h1>
   <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
   <div > ... </div>

Что такое селектор css для второго div (1-й div в div "content" ), чтобы я мог установить цвет шрифта даты в этом div?

Ответ 1

САМЫЙ ПРАВИЛЬНЫЙ ответ на ваш вопрос...

#content > div:first-of-type { /* css */ }

Это применит CSS к первому div, который является прямым дочерним элементом #content (который может быть или не быть первым дочерним элементом #content)

Другая опция:

#content > div:nth-of-type(1) { /* css */ }

Ответ 2

Если мы можем предположить, что H1 всегда будет там, то

div h1+div {...}

но не бойтесь указывать идентификатор содержимого div:

#content h1+div {...}

Это так же хорошо, как вы можете получить кросс-браузер прямо сейчас, не прибегая к библиотеке JavaScript, такой как jQuery. Использование h1 + div гарантирует, что только первый div после H1 получит стиль. Существуют альтернативы, но они полагаются на селектора CSS3 и, следовательно, не будут работать на большинстве установок IE.

Ответ 3

Вы хотите

#content div:first-child {
/*css*/
}

Ответ 4

Самое близкое к тому, что вы ищете, это : псевдослот первого ребенка; к сожалению, это не будет работать в вашем случае, потому что перед <div>s у вас есть <h1>. Я бы предположил, что вы либо добавляете класс в <div>, например <div class="first">, а затем создаете его таким образом или используете jQuery, если вы действительно не можете добавить класс:

$('#content > div:first')