CODEWITHSUNDEEP
csscss-selectors
qaxf6auux
qaxf6auux

Reputation: 2754

Style is cascading strangely

I have an inline stylesheet that is cascading really strangely.

I have a menu made with a <ul> and I want to make it so that when a user is on a page, the background color of the current page link on the <li> is green. I did this by creating an ID with background-color: #288E3A;, but despite placing it after the ID for the menu, I cannot make the current <li> turn green. The only way I can get it to work is to use !important, but I cannot bring myself to use that solution. -shudder-

I have a feeling this is probably something really simple I am missing. Can someone explain where I went wrong?

#menu ul {
  padding: 15px;
  list-style-type: none;
}
#menu ul li {
  background-color: #363636;
  margin: 0px 0px 15px;
  line-height: 50px;
  padding: 0px 5px 0px 5px;
}
#current_page ul li {
  background: #288E3A /*!important*/;
}
<div id="menu">
  <p>MAIN MENU</p>
  <div id="button_container">
    <ul>
      <li id="current_page">HOME</li>
      <li>CAR LOANS</li>
      <li>AUTO LOAN REFINANCING</li>
      <li>AUTO CALCULATORS</li>
      <li>TOOLS AND RESOURCES</li>
    </ul>
  </div>
</div>
<div id="content_container">
  <img src="img/cf_mobile_website-4.jpg" />
</div>

Upvotes: 0

Views: 41

Answers (1)

Parker Hutchinson
Parker Hutchinson

Reputation: 1721

your css is incorrectly specifying the element, what you want is this : 

#menu ul li#current_page{
    background:#288E3A;
}

Better yet you could use css to specify the first child so you wont need to add a custom id:

#menu ul li:first-child{
    background:#288E3A;
}

Upvotes: 1

Related Questions