CODEWITHSUNDEEP
csscss-selectors
Dale
Dale

Reputation: 1301

CSS :not() is not working as I would expect

I've got the following HTML and CSS code which can also be found and played with here //jsfiddle.net/0k1qah6x/7/

My intent is for the number "1" which has the class "active" not to be red.

.pdf-pagination a:not(.active) {
  color: red;
  text-decoration: none;
}
<div class="pdf-pagination">
  <ul>
    <li class="disabled">
      <a id="pdfPaginationLink0" href="#" data-page="0">←</a>
    </li>
    <li class="active">
      <a id="pdfPaginationLink1" href="#" data-page="1">1</a>
    </li>
    <li>
      <a id="pdfPaginationLink2" href="#" data-page="2">2</a>
    </li>
    <li>
      <a id="pdfPaginationLink3" href="#" data-page="2">→</a>
    </li>
  </ul>
</div>

Upvotes: 0

Views: 52

Answers (1)

Phiter
Phiter

Reputation: 14967

Your anchors don't have the .active class, their parent li do.

You'll have to change your selector and move the :not() deselector to the parent, as follows:

.pdf-pagination li:not(.active) a {
  color: red;
  text-decoration: none;
}
<div class="pdf-pagination">
  <ul>
    <li class="disabled">
      <a id="pdfPaginationLink0" href="#" data-page="0">←</a>
    </li>
    <li class="active">
      <a id="pdfPaginationLink1" href="#" data-page="1">1</a>
    </li>
    <li>
      <a id="pdfPaginationLink2" href="#" data-page="2">2</a>
    </li>
    <li>
      <a id="pdfPaginationLink3" href="#" data-page="2">→</a>
    </li>
  </ul>
</div>

Upvotes: 5

Related Questions