CSS target UL by LI class

Question

I am trying to target a UL that has no class, I have no control over the HTML that is output...

<ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
    <li class="item">Item 4</li>
</ul>

I am trying to apply an image bullet like this....

ul {
    list-style-image: url('sqpurple.gif');
}

There are many different UL tags on the page so is there a way I can just target this one?

You could use the [CSS3 :nth-child() Selector](https://www.w3schools.com/cssref/sel_nth-child.asp). — Patrick Mlr, Aug 02 '17 at 11:40
@Paulie_D He has no control over the HTML, he wants to select `ul` which has no class, I guess. — Abhishek Pandey, Aug 02 '17 at 11:44

score 1 · Answer 1 · answered Aug 02 '17 at 11:34

"I am trying to target a UL that has no class", you can use :not() selector.

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

This will apply style if there is no class attr on ul

ul:not([class]) {
  list-style:circle;
}

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
</ul>

<ul class>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
</ul>

CSS target UL by LI class

1 Answers1