CSS: adding specific css to a <li> element

Question

I want one <li> inside of a <ul> that I don't want to be affected by the CSS that affects the rest of the <li> elements in the list.

I am trying to add an id or a class to the line item element, but I can't figure out the correct syntax to do this:

<li id="submit">
  <button id="seSubmitButton" class="btn btn-success" data-placeholder="SUBMIT">
    SUBMIT
  </button>
</li>

The css that affects this is here:

.dropdown-menu>li:hover {
  background-color: #f2c2c2;
}

I tried multiple things here:

.dropdown-menu>li>submit :hover {
  background-color: #a2a2a2;
}

like .dropdown-menu>li submit or just .li submit

but it's not picking it up. What am I doing wrong with the specific syntax to make this specific <li> picked up by my CSS?

Josh Crozier · Accepted Answer · 2015-02-20 19:26:57Z

1

You would use the selector li#submit since the li element has an id of submit:

Example Here

.dropdown-menu>li#submit:hover {
  background-color: #a2a2a2;
}

You could also use the :not() pseudo class to negate the li#submit element when setting the initial styling that you are trying to overwrite:

Example Here

.dropdown-menu>li:not(#submit):hover {
  background-color: #f2c2c2;
}

answered Feb 20, 2015 at 19:26

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brian Powell Over a year ago

Great. Thank you for this! Where can I read on the differences between all the different characters I could possibly put - . vs # vs > etc....

Josh Crozier Over a year ago

@JohnWu MDN is the best place.. Scroll down to "CSS Selectors" developer.mozilla.org/en-US/docs/Web/CSS/Reference

Jimmy Over a year ago

Why not? When you have no experience with basics w3schools is fine.

Jimmy · Accepted Answer · 2015-02-20 19:28:17Z

1

When you added id, you can use it in your stylesheet to address the element:

#id {
    background-color: #f2c2c2;
}
#id:hover {
     /* some style */
}

answered Feb 20, 2015 at 19:28

Jimmy

2861 silver badge9 bronze badges

Comments

Tanjima Tani · Accepted Answer · 2015-02-20 19:40:51Z

0

You should use # while using id and dot(.) while using class.

for id

 #idName {
    /* css propery here */
    }

for class

.className {
    /* css propery here */
}

answered Feb 20, 2015 at 19:40

Tanjima Tani

5804 silver badges18 bronze badges

Collectives™ on Stack Overflow

CSS: adding specific css to a <li> element

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related