CODEWITHSUNDEEP
htmlcss
Micah
Micah

Reputation: 4560

CSS apply property to li which has specific class

I have a problem to apply css to the li element which has specific class. I want to change the background color of that li, but I couldnt find a way to do that. I am not sure about if this is changing 'parent' since I know css cant control parent.

CSS

.navi ul li { padding:20px; background-color: #00; }


.navi ul li + .current_location { background-color: #FFF; }

or

.navi ul li .current_location { background-color: #FFF; }

//will only change the background color of letters inside, no the li element.

current_location + ul li { background-color: #FFF; }

// will only apply to the children of the li which has class .current_location.



I want to change the li background color where it has class .current_location;

HTML 

   <nav class="navi">
            <ul>
              <li>
                <a>General Config</a>
              </li>
              <li class="current_location">
                <a>Menu</a>
              </li>
              <li>
                <a>User Level</a>
              </li>
              <li>
                <a>User</a>
              </li>
              <li>
                <a>Tag</a>
              </li>
              <li>
                <a>Log</a>
              </li>
            </ul>
          </nav>

Thank you very much for your advice

Upvotes: 0

Views: 239

Answers (3)

Kingk
Kingk

Reputation: 1021

.navi ul li.current_location { background-color: #FFFFFF; }

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

.navi ul li + .current_location should be .navi ul li.current_location.

Fiddle

The + selector is used for selecting next element after the element.
Ex: div+p will select all p element which are coming after a div element. example

Upvotes: 3

sandeep
sandeep

Reputation: 92793

Remove the space between .current_location & LI. Write like this:

.navi ul li.current_location { background-color: #FFF; }

Upvotes: 1

Related Questions