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

97

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

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

css css-selectors GregH
источник
1
Пожалуйста, примите ответ, получивший наибольшее количество голосов, он определенно правильный.
Барри Майкл Дойл

Ответы:

228

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

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

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

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

#content > div:nth-of-type(1) { /* css */ }
Джереми Мориц
источник
6
Согласитесь, что это ЕДИНСТВЕННЫЙ правильный ответ на вопрос и его следует принять.
Илья Стрельцын
Можете ли вы сказать мне, как выбрать все div, exceptпервый / последний div?
Tân
5
@HappyCoding #content > div:not(:last-of-type) { /* css */ }
Джереми Мориц
@ Tân, если вы хотите, чтобы все div, кроме первого и последнего, были бы ... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }
Джереми Мориц
20

Вы хотите

#content div:first-child {
/*css*/
}
Капитан Отис
источник
3
Не получится, потому что <div>это не первый ребенок (это <h1>).
Джош Лейтцель
Не говоря уже о том, что это вообще не будет работать в IE, даже если дата divбудет первым дочерним элементом.
Валентин Флахсель
1
В самом деле? W3 говорит, что будет, пока указан doctype. (Я, честно говоря, не знаю.)
Джош Лейтцель
3
Просто запустил тест, он действительно работает, если указан doctype. В свою защиту, я не удивлюсь, если что-то начнет работать в IE, если вы наберете <the_cake_is_a_lie> в верхней части файла ...
Валентин Флахсель
1
Я всегда проверяю, прежде чем публиковать ответ. А торт - ложь.
Capt Otis
16

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

div h1+div {...}

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

#content h1+div {...}

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

Стэн Роджерс
источник
+1. Даже не думал об этом. Имейте в виду, что это решение не будет работать в IE6.
Джош Лейтцель
6

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

$('#content > div:first')

Джош Лейтцель
источник
1
орфографическая $('#content > div.first)
ошибка