Targeting Selectors Without a Class Attribute

I recently ran into the issue that I needed to target certain <li> elements whose parent <ul> does not contain a class attribute. I might have been able to solve this issue in a different way, but in this case the parent <ul>s won’t e…

I recently ran into the issue that I needed to target certain <li> elements whose parent <ul> does not contain a class attribute. I might have been able to solve this issue in a different way, but in this case the parent <ul>s won’t ever—never say never! ;)—have a class attribute, this method works well. It wasn’t the cleanest possible solution, but sometimes things need to give.

Most of the time I usually target elements or class names, but the following selector can definitely be helpful once in a while.

By using the :not() CSS pseudo-class (also known as the negation pseudo-class), it’s possible to exclude certain values from the selection. In this case I wanted to check for the presence of a class attribute, rather than its value. To do that, we can make use of the CSS attribute selector.

Combined, these two can make a powerful pair.

ul:not([class]) li {
    property: value;
}

The above CSS rule targets the <li> of this list:

<ul>
  <li>Text</li>
</ul

But not of this:

<ul class="">
  <li>Text</li>
</ul

or this:

<ul class="classname">
  <li>Text</li>
</ul

I hope you found this article useful and will enjoy excluding elements from now on 😉


Print Share Comment Cite Upload Translate
APA
foobartel.com :: Stream | Sciencx (2024-03-29T05:19:09+00:00) » Targeting Selectors Without a Class Attribute. Retrieved from https://www.scien.cx/2020/02/18/targeting-selectors-without-a-class-attribute/.
MLA
" » Targeting Selectors Without a Class Attribute." foobartel.com :: Stream | Sciencx - Tuesday February 18, 2020, https://www.scien.cx/2020/02/18/targeting-selectors-without-a-class-attribute/
HARVARD
foobartel.com :: Stream | Sciencx Tuesday February 18, 2020 » Targeting Selectors Without a Class Attribute., viewed 2024-03-29T05:19:09+00:00,<https://www.scien.cx/2020/02/18/targeting-selectors-without-a-class-attribute/>
VANCOUVER
foobartel.com :: Stream | Sciencx - » Targeting Selectors Without a Class Attribute. [Internet]. [Accessed 2024-03-29T05:19:09+00:00]. Available from: https://www.scien.cx/2020/02/18/targeting-selectors-without-a-class-attribute/
CHICAGO
" » Targeting Selectors Without a Class Attribute." foobartel.com :: Stream | Sciencx - Accessed 2024-03-29T05:19:09+00:00. https://www.scien.cx/2020/02/18/targeting-selectors-without-a-class-attribute/
IEEE
" » Targeting Selectors Without a Class Attribute." foobartel.com :: Stream | Sciencx [Online]. Available: https://www.scien.cx/2020/02/18/targeting-selectors-without-a-class-attribute/. [Accessed: 2024-03-29T05:19:09+00:00]
rf:citation
» Targeting Selectors Without a Class Attribute | foobartel.com :: Stream | Sciencx | https://www.scien.cx/2020/02/18/targeting-selectors-without-a-class-attribute/ | 2024-03-29T05:19:09+00:00
https://github.com/addpipe/simple-recorderjs-demo