CSS select last paragraph, with not following unordered list

Question

I'd like to select the last <p> but only if the next sibling is NOT an <ul>

<!-- Select this p element -->
<div>
    <p>...</p>
    <img>
</div>

<!-- Do NOT this p element -->
<div>
    <p>...</p>
    <ul>...</ul>
</div>

This is not working:

<style>
    div p:last-of-type, div p:not(+ul) {
    ...
}
</style>

In this case, you're giving two different selector sa you put a coma between them — Toan Lu, Oct 25 '17 at 05:12
I don't think that can be done with CSS, you might need a bit of Javascript to check for siblings. — Nisarg Shah, Oct 25 '17 at 05:18
No...not with CSS - https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector — Paulie_D, Oct 25 '17 at 11:10

score 0 · Answer 1 · answered Oct 25 '17 at 05:41

0

There's no way to do this with pure CSS, if you really must select the next sibling NOT <ul>, you're going to have to resort of Javascript.

answered Oct 25 '17 at 05:41

ferhado

2,363
2
12
35

score 0 · Answer 2 · answered Oct 25 '17 at 06:08

As per my understanding there is no way to select such selector using only CSS. You should need some script to do it. Check below snippet which helps with simple jquery.

$(document).ready(function() {
  $('p').each(function() {
    if (!$(this).next().is('ul')) {
      $(this).addClass('color-red');
    }
  });
});

.color-red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Some text</p>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>
<div>
  <p>Some text</p>
  <span>Some more text</span>
</div>

score 0 · Answer 3 · answered Oct 25 '17 at 09:17

0

<div class="all">
<div>
    <p>1sst</p>
    <img>
</div>

<!-- Do NOT this p element -->
<div>
    <p>last p</p>
    <ul>...</ul>
</div>
</div>
<script>
$('.all div').children('p').last()
</script>

answered Oct 25 '17 at 09:17

Xigo

29
9

CSS select last paragraph, with not following unordered list

3 Answers3