CSS как выбрать первый встречающийся элемент после другого элемента
у меня есть следующий HTML-код на странице
<h4>Some text</h4>
<p>
Some more text!
</p>
в моем css у меня есть следующий селектор для стиля элемента H4. HTML-код выше - это лишь небольшая часть всего кода, есть несколько div, более обернутых вокруг принадлежности к shadowbox
#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
color : #614E43;
margin-top : 5px;
margin-left : 6px;
}
поэтому у меня есть правильный стиль для моего элемента H4, но я также хочу стиль тега абзаца в моем HTML. Возможно ли это с CSS-селекторами? И если да, то как я могу это сделать?
3 ответов
#many .more.selectors h4 + p { ... }
Это называется соседний селектор брата.
для вашего буквального примера вы хотите использовать соседний селектор (+).
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>
нажмите на это, когда пытаются решать такие вещи сам.
Я сделал селектор, который имеет дело с элементом, будучи чем-то иным, чем p.
.here .is.the #selector h4 + * {...}
надеюсь, это поможет всем, кто его найдет:)