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

Question

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

<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?

Answer 1

Самый правильный ответ на ваш вопрос ...

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

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

Другой вариант:

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

Answer 2

Вы хотите

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

Answer 3

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

div h1+div {...}

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

#content h1+div {...}

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

Answer 4

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

$('#content > div:first')