Выбрать первый встречающийся элемент после другого элемента

114

У меня на странице есть следующий HTML-код:

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

В моем .cssя получил следующий селектор для стилизации h4элемента. Приведенный выше HTML-код - это лишь небольшая часть всего кода; есть еще несколько divэлементов, относящихся к теневому ящику:

#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

— Роб
источник

201

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

Это называется селектором соседнего брата .

— Phrogz
источник

1

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

— Phrogz

2

Обратите внимание, что это работает только для элементов, следующих за первым НЕМЕДЛЕННО. Если вы хотите иметь второй следующий элемент html, вы можете связать его следующим образом: #selector .original + h4 + p, чтобы получить p после h4 после элемента .original. Очень полезно

— user1610743 01

31

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

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

Использование *соответствует любому элементу, как описано в заголовке. Было для меня полезным напоминанием.

— Джеймс EJ

1

Это единственный ответ, соответствующий поставленному вопросу. Другие ответы требуют предварительных знаний о типе предыдущего элемента.

— Хьюго Вейдевельд

0

Простофинг для новичков:

Если вы хотите выбрать элемент сразу после другого элемента, вы используете +селектор.

Например:

div + pЭлемент "+" выбирает все <p>элементы, которые помещаются сразу после <div>элементов.

Если вы хотите узнать больше о селекторах, используйте эту таблицу

— Труллер
источник

0

Я использую последнюю версию CSS, и "+" у меня не работает, поэтому я получаю

:Первый ребенок

— В.Николсон
источник