CODEWITHSUNDEEP
jqueryhtmlcss
user3968861
user3968861

Reputation: 61

Targeting li elements except when preceded by a non li element

How can I target the li elements except when they come after the <p class="Notes> element? In other words, I want to target the Steps but not the Notes.

I tried adding a class to the OL that I want to exclude from selection but the code I came up with doesn't work.

(Btw, restructuring the html is not an option)

('#a > ol > li.P-List-number').not(':has("ul.Notes")')


<div id="a">
<h2 class="task">Blah, blah, blah</h2>
    <p class="Body">Yada, yada, yada:</p>
        <ol>
          <li class="P-List-number">Step 1...</li>
          <li class="P-List-number">Step 2...</li>
          <li class="P-List-number">Step 3...</li>
       </ol>
       <p class="Notes>NOTES</p>
       <ol class="Notes">
          <li class="P-List-number">Note 1</li>
          <li class="P-List-number">Note 2</li>
       </ol>
</div>

Upvotes: 0

Views: 46

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122077

You can use p:not(.Notes) and then select ol with next() and li with children()

$('p:not(.Notes)').next('ol').children('li').css('color', 'blue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
  <h2 class="task">Blah, blah, blah</h2>
  <p class="Body">Yada, yada, yada:</p>
  <ol>
    <li class="P-List-number">Step 1...</li>
    <li class="P-List-number">Step 2...</li>
    <li class="P-List-number">Step 3...</li>
  </ol>
  <p class="Notes">NOTES</p>
  <ol class="Notes">
    <li class="P-List-number">Note 1</li>
    <li class="P-List-number">Note 2</li>
  </ol>
</div>

Or just p:not(.Notes) + ol li

$('p:not(.Notes) + ol li').css('color', 'blue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
  <h2 class="task">Blah, blah, blah</h2>
  <p class="Body">Yada, yada, yada:</p>
  <ol>
    <li class="P-List-number">Step 1...</li>
    <li class="P-List-number">Step 2...</li>
    <li class="P-List-number">Step 3...</li>
  </ol>
  <p class="Notes">NOTES</p>
  <ol class="Notes">
    <li class="P-List-number">Note 1</li>
    <li class="P-List-number">Note 2</li>
  </ol>
</div>

Upvotes: 1

Related Questions