CSS: как выбрать только первого несмежного брата после элемента

Question

У меня есть такая HTML-страница:

 <p></p>
 <p></p>
 <p></p>

 <div></div>

 <p></p>
 <p></p>
 <p></p>

 <div></div>

И этот образец продолжается.

Обычно элементы div не должны отображаться так:

div{display:none;}

Но когда параграф зависает, должен отображаться первый элемент div после этого:

p:hover+div{display:block;}

Но это работает только для предыдущего p. и это:

p:hover~div{display:block;}

Показывает все div после зависшего p, а не только первый после.

Как я мог отобразить только первый несмежный div после зависшего p?

вот демо

На самом деле я ищу селектор вроде first-sibling.

html css css-selectors

2

Ormoz 27 Фев 2015 в 15:51

Answer 1

Вы должны использовать следующие настройки:

p:hover ~ div ~ div {
    display:none;
}

Это вернет значение "нет" для всех div после первого div, следующего за зависшим абзацем.

div {
  display: none;
}
p:hover ~ div {
  display: block;
}
p:hover ~ div ~ div {
  display: none;
}

<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>d1</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>d2</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>d3</div>

8

Harry 27 Фев 2015 в 12:59

Answer 2

Я бы поместил ваши блоки между тегами разделов. Тогда теги <p> и <div> являются братьями и сестрами одного и того же элемента. Также, если эти теги принадлежат друг другу, также хорошо отразить это в вашей разметке.

JSFIDDLE ДЕМО

<section>
 <p>hello</p>
 <p>world</p>
 <p>bar</p>

 <div></div>
</section>

<section>
 <p>hello</p>
 <p>world</p>
 <p>bar</p>

 <div></div>
</section>

Css

section p:hover~div{display:block;}

0

kasper Taeymans 27 Фев 2015 в 13:05

Answer 3

Вы пробовали использовать это:

div {
  display: none;
  background: blue;
  color: #fff;
}
p:hover+div,
p:hover+p+div,
p:hover+p+p+div {
  display: block;
}

<p>lorem</p>
<p>lorem</p>
<p>lorem</p>

<div>Ipsum</div>

<p>lorem</p>
<p>lorem</p>
<p>lorem</p>

<div>Ipsum</div>

3

Aaron 27 Фев 2015 в 12:55

Answer 4

Селектора «первого брата» нет, но вы можете переопределить стиль для последующих элементов div, используя тот же метод, описанный в этот ответ:

div, 
p:hover ~ div ~ div {
    display: none;
}

p:hover ~ div {
    display: block;
}

Это предпочтительнее, если вы не знаете заранее максимальное количество элементов p, которые могут разделять элементы div, или вам не нужно жестко кодировать все необходимые смежные селекторы, как показано в ответе Аарона.

4

Community 23 Май 2017 в 12:30

CSS: как выбрать только первого несмежного брата после элемента

4 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

html