Question

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

Answer 1

.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