Какой селектор 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?

 Barry Michael Doyle07 мар. 2018 г., 13:41
Пожалуйста, примите ответ с наибольшим количеством голосов, это определенно правильно.

Ответы на вопрос(4)

что H1 всегда будет там, то

div h1+div {...}

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

#content h1+div {...}

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

 Josh Leitzel19 сент. 2010 г., 23:49
+1. Даже не думал об этом. Имейте в виду, что это решение не будет работать в IE6.

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

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

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

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

#content > div:nth-of-type(1) { /* css */ }
 Jeremy Moritz05 июл. 2016 г., 20:14
@HappyCoding#content > div:not(:last-of-type) { /* css */ }
 Foo05 июл. 2016 г., 11:17
Можете ли вы сказать мне, как выбрать все divexcept первый / последний div?
 Ilya Streltsyn17 июл. 2013 г., 18:51
Согласитесь, что это ТОЛЬКО правильный ответ на вопрос, и его следует принять.

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

$('#content > div:first')

 Mateusz Odelga04 нояб. 2015 г., 08:37
опечатка - должно быть$('#content > div.first)

Ты хочешь

#content div:first-child {
/*css*/
}
 doublejosh29 мая 2019 г., 02:30
Не работает! Кажется очевидным ответом, но тот факт, что это не работает, вероятно, является причиной вопроса. Пожалуйста, удалите.
 Josh Leitzel19 сент. 2010 г., 23:48
В самом деле? W3 говорит, что будет, пока указан тип документа. (Честно говоря, я не знаю, хотя.)
 Capt Otis20 сент. 2010 г., 00:17
Хаха, очевидно нет. Я бы честно использовал jQuery для этого.
 Capt Otis19 сент. 2010 г., 23:58
Я всегда проверяю, прежде чем отправлять ответ. И торт это ложь.
 Valentin Flachsel19 сент. 2010 г., 23:55
Только что запустил тест, он действительно работает, если указан doctype. В мою защиту, я бы не удивился, если бы в IE начали работать вещи, если бы вы напечатали <the_cake_is_a_lie> в верхней части файла ...
 Valentin Flachsel19 сент. 2010 г., 23:45
Не говоря уже о том, что в IE он вообще не будет работать, даже если датаdiv был бы первым ребенком.
 Josh Leitzel19 сент. 2010 г., 23:36
Не будет работать, потому что<div> это не первый ребенок (это<h1>).
 Valentin Flachsel20 сент. 2010 г., 00:02
@Capt Отис: .. и бедный кубик должен был умереть за это :) Но это не меняет того факта, что все равно не будет работать, сh1 быть первым ребенком Не тестировалтот, вы знали ?

Ваш ответ на вопрос