Change list-style for only some of the li elements-CodePudding

I'm new to CSS and I'm trying to better understand how CSS selectors work. For example, I was trying to get rid of the bullet points for only some of the li elements.

Say I only want the 2nd li to not have the bullet point, here's what I've tried with CSS

.hidden {
  list-style: none
}

<ul>
  <li>A</li>
  <li>B</li>
  <li >C</li>
  <li>D</li>

</ul>

and

li.hidden {list-style: none}

The above two syntaxes doesn't work, but if I use nth-child, it does work:

li:nth-child(2) {list-style: none}

Why does nth-child work while using class selector doesn't work in this instance?

Also, is there other better way to make this work? I'd prefer not to use nth-child, because if I have many li's I'd like to select, it could be a hassle.

CodePudding user response：

It looks like all three of your selection methods should work, so it's not really clear where the problem lies. I suggest sharing more of your code to see if there's something else that's causing an issue.

CodePudding user response：

That's Doesn't matter if you want to go with this condition just put Important at the end .. It rewrite everything The first two method did not work because There is certain degree that can not be change with such try but it can change with tag

!importaint

if you put it it changes In third one you specified a particular objects so it definitely run ... Try yourself.. Have fun..