How to call <li class="#"> in CSS?

HTML & CSS
1

Hey,

I know you can call a <div class=“#”> with a . in your CSS sheet but how do I write a rule for a list item with a class?

Cheers.

2 
<li class="my-class">...</li>

li.my-class {....}

If you use .my-class you’re actually saying *.my-class, i.e., the universal selector followed by a class selector. It matches any element that belongs to the class “my-class” (not only DIVs).

By prepending a type selector you can limit the matches to elements of that type, so blockquote.my-class would only match blockquote elements that belong to my-class, etc.

3

Thanks I actually tried that but I didn’t think it worked…but it does, sort of.
What I’m trying to do is remove a right hand border from the last <li> item in my <ul> These are horizontal buttons and I’ve given each <li> a right hand border to visually separate the buttons when displayed in the navbar. Now I need to remove the right hand border of the the very last button on the right end of the navbar. I was using your suggested CSS but I cant seem to remove the right hand border. I thought the class rule in my CSS was wrong but it seems It’s right I just cant effect the border thats there?

Any ideas? Ive tried:

li.no-border a {
border-style: none}

li.no-border {
border-style: none}

li.no-border a {
border: none}

li.no-border a {
border-right: none}

and many others. Does this have something to do with inheritance from other li or ul ?

4

I’ll need to see the markup and the CSS rule that adds the border to be able to help you. My intuitive guess is that you have a specificity issue; i.e., that the rule that adds the border is more specific than the rule that removes it.

For instance, if you have something like this,

#nav li {border-right:1px solid #f00}

and then you have class="no-border" on the last <li> in the list, then you’ll need this to remove the border:

#nav li.no-border {border-right:none}

If you omit #nav from the second rule it won’t work, because the first rule will be more specific.

5

All done!!!

Thanks, I appreciate for your time.

#div ul li.no-border a { }