CSS Change List Item Background Color with Class

CSS Change List Item Background Color with Class

This is an issue of selector specificity. (The selector .selected is less specific than ul.nav li.)

To fix, use as much specificity in the overriding rule as in the original:

ul.nav li {
 background-color:blue;
}
ul.nav li.selected {
 background-color:red;
}

You might also consider nixing the ul, unless there will be other .navs. So:

.nav li {
 background-color:blue;
}
.nav li.selected {
 background-color:red;
}

That's a bit cleaner, less typing, and fewer bits.

How do I change background color of each list item with JavaScript?

If I'm reading this correctly (please let me know if I'm not), you just want to change the background color of the text when the mouse pointer hovers over a list item, correct?

If so, you can do this really easily with a little CSS:

.yellow:hover {

  background-color: yellow;

}

<ul>

  <li>

    <a href="#ref" title="go to ref" class="yellow">Text</a>

  </li>

  <li>

    <a href="#ref" title="go to ref" class="yellow">Text</a>

  </li>

  <li>

    <a href="#ref" title="go to ref" class="yellow">Text</a>

  </li>

</ul>

How do I change the default background color of class .active list-item in Bootstrap 4?

Try adding !important after the color.

.active{
    background-color: #00cccc !important;
}

How to change list LI item background color

the reason why it breaks everything after adding multiple <p> tags and <spans> is because the <p> tags are the block elements, hence their default behavior is to take a complete line or start from the new line. If you want to add multiple <p> tags inside a single<li> tag then you should specify <p> tag as inline-block while <spans> are inline elements by default.

look the HTML in which i have entered 1 <p> and <span> tag in each <li>

   <ul>
      <li>
        <p>this is nested paragraph inside li</p>
        <span>hellooo</span>
      </li>
      <li>
        <p>this is my second nested paragraph</p>
        <span>hellooooo</span>
      </li>
      <li>
        <p>this is third nested paragraph</p>
        <span>Hellooooooooooooo</span>
      </li>
    </ul>

right now its breaks everything but when I will specify <p> tag as inline-block, everything will look fine.

ul {
  list-style-position: inside
}
li{
  background-color: gray;
  color: white
}
li:hover {
   background-color: red;
}
p{
  display: inline-block
}

How to change the background color of an indented list item on hover using CSS?

a pseudo element to cover the outside part:

.test {
  margin-left: 5em;
  width: 5em;
  text-indent: -2em;
  list-style-type: none;
  position:relative;
  z-index:0;
}
.test:hover {
  background: lime;
}
.test:hover::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  right:100%;
  width:2em;
  background: inherit;
}

<li class="test">hello world this is a test</li>

change all li items background color

using Jquery, the following line will do the trick.
$("li").css("background-color","red");

Hope this helps

How to change background colour of individual list items of a nested list upon hover (and to full menu width)

Change this line:

.list-item :hover {background: #000;}

to this:

li .list-item :hover {background: #000;}

Here's jsFiddle...

---

Related Topics