Виберіть перший елемент, що виникає, після іншого

113

На сторінці у мене є такий HTML-код:

<h4>Some text</h4>
<p>
Some more text!
</p>

У моєму .cssдля отримання стилю h4елемента є наступний селектор . HTML-код вище - це лише невелика частина всього коду; Є ще кілька divs, які обернуті навколо приналежності до тіньового ящика:

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
    color               : #614E43;
    margin-top          : 5px;
    margin-left         : 6px;
}

Отже, у мене є правильний стиль для мого h4елемента, але я також хочу стилювати pтег у своєму HTML.

Чи можливо це за допомогою CSS-селекторів? І якщо так, то як я можу це зробити?

html css css-selectors

— Роб
джерело

200

#many .more.selectors h4 + p { ... }

Це називається сусіднім селектором .

— Фрогз
джерело

1

Альтернативою є використання JS для пошуку h4елементів, перехід до наступного брата та додавання до цього класу CSS. З jQuery це було б просто$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');

— Фрогз

2

Зауважте, що це працює лише на елементах, що слідують за першим НЕМОВНО. Якщо ви хочете мати другий наступний html-елемент, ви можете зв'язати це ланцюжком так: #selector .original + h4 + p, щоб отримати p, що слідує за h4, після елемента .original. Дуже корисний

— користувач1610743

30

Для вашого прямого прикладу ви хочете використовувати сусідній селектор (+).

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

Однак, якщо ви хочете вибрати всі послідовні абзаци, вам знадобиться скористатися загальним селектором (~).

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

На жаль, на жаль, помилка в IE 7+ .

— Джоел Меллон
джерело

16

Просто натисніть на це, намагаючись вирішити такий тип речі, як я.

Я зробив селектор, який займається елементом після того, як був чимось іншим, ніж p.

.here .is.the #selector h4 + * {...}

Сподіваюся, це допоможе кожному, хто його знайде :)

— Том
джерело

9

Використання *відповідності будь-якому елементу, як описано в заголовку. Було корисним нагадуванням для мене.

— James EJ

1

Це єдина відповідь, яка відповідає питанню. Інші відповіді вимагають попереднього знання про тип попереднього елемента.

— Гюго Війдевельд

0

Просто для початківців:

Якщо ви хочете вибрати елемент негайно після іншого елемента, ви використовуєте +селектор.

Наприклад:

div + pЕлемент "+" вибирає всі <p>елементи, які розміщуються відразу після <div>елементів

Якщо ви хочете дізнатися більше про селектори, використовуйте цю таблицю

— Trooller
джерело

0

Я використовую останні CSS і "+" не працював для мене, тому я закінчую

: первістка

— В.Ніхольсон
джерело