The :not() selector does not overlook classes within list items that contain links

Question

Struggling with using the :not() selector to exclude the .current class from the first list item.

HTML:

<ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Page 2</a</li>
    <li><a href="#">Page 3</a></li>
</ul>

CSS:

ul li a:not(.current){color:red}

Struggling to make the :not() selector work to exclude the .current class.

Tried this as well:

 ul li a:not(.current a){color:red}

Answer 1

Answer №1

Utilize the :not selector specifically for the element being targeted, such as the li element with the class current in this scenario.

Additionally, it seems there may have been a typo in your code where the closing < was missing for the a tag within the second li element.

ul li:not(.current) a {
  color:red
}

<ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
</ul>

Answer 2

Utilize the :not selector specifically for the element being targeted, such as the li element with the class current in this scenario.

Additionally, it seems there may have been a typo in your code where the closing < was missing for the a tag within the second li element.

ul li:not(.current) a {
  color:red
}

<ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
</ul>

Answer 3

The specified class is assigned to the li element within the HTML structure, hence the correct CSS selector would be:

ul li:not(.current) a { color: red; }

This code snippet should effectively style the desired elements.

Answer 4

The specified class is assigned to the li element within the HTML structure, hence the correct CSS selector would be:

ul li:not(.current) a { color: red; }

This code snippet should effectively style the desired elements.