Как использовать CSS для выбора элемента, только если конкретный элемент идет после того, который вы хотите выбрать?

Question

Используя CSS и следующий пример, есть ли способ выбрать только <p>с последующим <ul>"S?

Если нет, то что такое селектор jQuery, или он потребует if заявление?

<p>Hello there.</p>

<p>Select this para!</p>
<ul>
    <li>list item</li>
</ul>

<ul>
    <li>don't select this list! :)</li>
</ul>

<p>And don't select this paragraph! :)</p>

Answer 1

Это невозможно в CSS3, лучшее, что вы можете сделать, это выбрать только <ul> которые следуют <p>:

p + ul { /*...*/ }

Однако это станет возможным, когда браузеры начнут реализовывать субъектный оператор CSS4:

!p + ul { /*...*/ }

А пока вам придется использовать jQuery и вернуться к DOM.

Answer 2

Нет, на самом деле CSS не поможет вам в этом.

То, что вам нужно, это предыдущий селектор братьев и сестер, который не существует.

Взгляните на это тоже: есть ли CSS-селектор "предыдущий брат"?

Answer 3

К сожалению, вам нужно обратиться к JavaScript. Ближайший селектор CSS к тому, что вы хотите (соседний селектор брата) будет делать то, что вам нужно. Например, вы можете выбрать все <ul> после <p> как это:

p + ul { //style }

Однако вы можете сделать этот выбор в jQuery следующим образом:

$('p + ul').prev('p')

Итак, вы сначала выберите все <ul> незамедлительно после <p> а затем выберите предыдущий <p> от них.

Answer 4

http://api.jquery.com/prev/

Будет ли что-то подобное для вас? вам, возможно, придется добавить класс к P,

но это должно позволить вам выбрать каждый класс, выбранный элемент перед Uls

Пример:

<p class="selected">my p</p>
<ul>My ul</ul>
<script>$("ul").prev(".selected").css("background", "yellow");</script>
</body>

Answer 5

Вы также можете вставить пустой диапазон перед буквой перед ul и выбрать это:

span + p {
margin-bottom: 0;
}

Answer 6

используйте селектор: not/:has (однако не имеет широкой поддержки)

      <div>
   <span>first</span>
   <span>second</span>
</div>