How can I select items that do not have a class?

advertisements

If my document looks like this (lots and lots more of those <i...> though without any particular order)

<i class="special">abc</i>
<i>def</i>
<i>xyz</i>
<i class="another">rfd</i>

The order of the elements in the example is also just arbitrary, e.g. there is no order to them.

I want a css selector that gives me only the <i> where no class is set (not even using javascript).

How'd I do that?

Edit: I have specified the question, since they do not come ordered.


Use the :not() selector with an attribute selector to find elements that don't have a class.

i:not([class]) {
    ...
}