Как выбрать :: после того, когда следует p - PullRequest
Новая
       41

Как выбрать :: после того, когда следует p

0 голосов
/ 11 января 2019

Учитывая этот HTML: 

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
</div>

Я бы хотел, чтобы вместо самого последнего горизонтального правила был хороший дингбат, а для первого - пустая строка.

Однако рассмотрим этот HTML-код: 

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Здесь должна быть пустая строка для hr, а не дингбат.

Я думал, что я буду помещать дингбат в контент после каждого hr, затем удаляю контент для любого HR, а затем p: 

hr {
  border: 0;
  text-align: center;
}
hr::after {
  content: "❧"
}

hr::after + p {
  content: "";
}

Последнее правило, конечно, не работает. :)

Как установить ::after содержимое только , если за ним следует p? Или есть способ выбрать только последнее вхождение hr, если у него нет следующего элемента?

Ответы [ 2 ]

0 голосов
/ 11 января 2019

Вы можете упростить и рассмотреть только элемент p без hr:

Не за последние 

p:not(:last-child)::after {
  content: "❧";
  display:block;
  text-align:center
}
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Только за последние: 

p:last-child::after {
  content: "❧";
  display:block;
  text-align:center
}
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
0 голосов
/ 11 января 2019

Кто-то правильно укажет вам, что предыдущего селектора брата нет, но вам он не нужен.

Вы можете просто применить дингбат к hr, только когда это последний ребенок, например: 

div {
  margin-bottom: 1em;
  border: medium solid;
  padding: 0 0.5em;
}
hr {
  border: 0;
  text-align: center;
}
hr:last-child::after {
  content: "❧"
}
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
</div>
...