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

— ошибка