: перша дитина працює не так, як очікувалося

96

Я намагаюся вибрати перше h1всередині а divз класом, який називається detail_container. Це працює, якщо h1це перший елемент у цьому div, але якщо він з’являється після цього, ulвін не буде працювати.

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

У мене було враження, що CSS, який я маю, буде обирати перший, h1незалежно від того, де він знаходиться в цьому div. Як я можу змусити це працювати?

css css-selectors

— Людина з булочками
джерело

1

Що не може зробити CSS, JavaScript може.

— JCOC611

11

Це все-таки ви можете зробити з CSS3 :)

— BoltClock

216

У h1:first-childзасобі селектора

Виберіть першу дочірню історію її батьків
тоді і лише тоді, коли це h1елемент.

:first-childКонтейнера тут є ul, і як такий не може задовольнити h1:first-child.

Для :first-of-typeвашого випадку є CSS3 :

.detail_container h1:first-of-type
{
    color: blue;
}

Але з неприємностями щодо сумісності з браузером і не тільки, вам краще дати першому h1клас, а потім націлити цей клас:

.detail_container h1.first
{
    color: blue;
}

— BoltClock
джерело

2

Зараз я розумію, хоча, на мою думку, їм слід було впровадити обидві версії, коли вони створювали стандарт.

— Muffin Man

Не працює у випуску IE9. Там написано h1: невідомо в інструменті розробника

— Cine

11

Список сумісності в :first-of-typeселекторі.

— Jess Telford

4

Новіше список сумісності в :first-of-type. Старе посилання неправильне.

— BadHorsie

На мій погляд, термін :first-childнезрозумілий для розуміння, оскільки ви визначаєте елемент як селектор CSS, скажімо h1, а потім згодом думаєте "взяти першого дочірнього" з усіх на вибраному рівні DOM. Я стільки разів використовував це неправильно ... Нам потрібно звикнути до :first-of-typeселектора і подумати про першу дитину такого типу.

— Кай Ноак

13

:first-childвибирає перший h1 тоді і тільки тоді, якщо це перший дочірній матеріал свого батьківського елемента. У вашому прикладі, ulперша дитина div.

Назва псевдо-класу дещо вводить в оману, але це досить чітко пояснено тут, у специфікації.

:firstСелектор jQuery дає вам те, що ви шукаєте. Ви можете зробити це:

$('.detail_container h1:first').css("color", "blue");

— Роб Соберз
джерело

Ваше право це вводить в оману, я в основному заплутався, тому що раніше використовував jQuery для цього.

— The Muffin Man

9

Для цього конкретного випадку ви можете використовувати:

.detail_container > ul + h1{ 
    color: blue; 
}

Але якщо вам потрібен той самий селектор у багатьох випадках, у вас повинен бути клас для них, як сказав BoltClock.

— Грекз
джерело

У вас не повинно виникнути жодних проблем. Тут посилання w3.org/TR/CSS2/selector.html#child-selectors

— Grekz

6

ви також можете використовувати

.detail_container h1:nth-of-type(1)

Змінивши номер 1 на будь-який інший номер, ви можете вибрати будь-який інший елемент h1.

— Fabrice
джерело

1

Ви можете загортати свої h1мітки в інший, divі тоді першим буде те first-child. Для цього divнавіть не потрібні стилі. Це просто спосіб відокремити цих дітей.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>

— GhostToast
джерело

0

Елемент не може безпосередньо успадковувати <body>тег. Ви можете спробувати помістити це в <dir style="padding-left:0px;"></dir>тег.

— Едмонд Чау
джерело