Який селектор CSS можна використовувати для вибору першого div в іншому div

95

У мене є щось на зразок:

<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 "вмісту"), таким чином я можу встановити колір шрифту дати в цьому div?

css css-selectors

— GregH
джерело

1

Будь ласка, прийміть найкращу відповідь, це точно правильно.

— Barry Michael Doyle

224

НАЙ-ПРАВИЛЬНА відповідь на ваше запитання - це ...

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

Це застосує CSS до першого div, який є прямим дочірнім елементом #content (який може бути або не бути першим дочірнім елементом #content)

Інший варіант:

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

— Джеремі Моріц
джерело

6

Погодьтеся, що це ЄДИНА правильна відповідь на запитання, і її слід прийняти.

— Ілля Стрельцин

Чи можете ви сказати мені, як вибрати всі div exceptперший / останній div?

— Тан,

4

@HappyCoding #content > div:not(:last-of-type) { /* css */ }

— Jeremy Moritz

@ Tân, якщо ви хочете всі div, крім першого І останнього, це було б ... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }

— Jeremy Moritz

20

Ти хочеш

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

— Капітан Отіс
джерело

3

Не буде працювати, бо <div>це не перша дитина (це <h1>).

— Джош Лайтцель,

Не кажучи вже про те, що це взагалі не спрацює в IE, навіть якщо дата divбуде першою дитиною.

— Валентин Флаксель,

1

Дійсно? W3 заявляє, що буде, доки вказано тип документа. (Я, чесно кажучи, не знаю.)

— Джош Лайтцель,

3

Щойно провів тест, справді він працює, якщо вказано тип doctype. На мій захист, я не здивуюсь, якщо речі почнуть працювати в IE, якщо ви наберете <the_cake_is_a_lie> у верхній частині файлу ...

— Валентин Флачсель,

1

Я завжди тестую перед публікацією відповіді. А торт - брехня.

— капітан Отіс

16

Якщо ми можемо припустити, що H1 завжди буде там, тоді

div h1+div {...}

але не бійтеся вказувати ідентифікатор div вмісту:

#content h1+div {...}

Це приблизно так само добре, як ви можете отримати крос-браузер прямо зараз, не вдаючись до бібліотеки JavaScript, як jQuery. Використання h1 + div гарантує, що стиль отримує лише перший div після H1. Є альтернативи, але вони покладаються на селектори CSS3 і, отже, не будуть працювати при більшості встановлень IE.

— Стен Роджерс
джерело

+1. Навіть не думав про це. Майте на увазі, це рішення не працюватиме в IE6.

— Джош Лайтцель,

6

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

$('#content > div:first')

— Джош Лайтцель
джерело

1

орфографічна помилка - повинно бути$('#content > div.first)

— Матеуш Одельга