CSS Change List Item Background Color with Class

Question

I am trying to change the background color of one list item while there is another background color for other list items   This is what I have    x000D   x000D   lt style type  text css  gt  x000D       x000D  ul nav li x000D    x000D    display inline  x000D    padding 1em  x000D    margin 1em  x000D    background-color blue  x000D    x000D       x000D       x000D   selected x000D    x000D    background-color red  x000D    x000D      x000D   lt ul class  nav  gt  x000D    lt li gt Category 1 lt  li gt  x000D    lt li gt Category 2 lt  li gt  x000D    lt li class  selected  gt Category 3 lt  li gt  x000D    lt li gt Category 4 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    What this produces is all list items with a blue background  from the  nav  class   as if there were no  selected  class  However  when I take out the background color from the  nav  class  I get the red background for the list item with the  selected  class    I would like to use the  selected  class for other items on the page  i e  other list items  divs  etc     How would I go about solving this   Thank you in advance

User · Answer

Live Demo    If you want this to be highlighted depending upon the page your user is on then do this      To auto-highlight your current   navigation  first label your body tags   with an ID or class that matches the   section of the site  usually a   directory  that the page is in     lt body class  ab  gt       We label all files in the   about     directory with the  ab  class  Note   that we use a class here to label the   body tags  We found that using an ID   in the body did not work consistently   in some older browsers  Next we label   our menu items so we can target them   individually thus     lt div id  n  gt   lt a class  b  id  hm  href     gt Home lt  a gt       lt a class  b  id  ab  href   about   gt About lt  a gt       lt  div gt       Note that we use the  b utton class to   label menu items as buttons and an ID     ab   to label each unique menu item    in this case about   Now all we need   is a CSS selector that matches up the   body label with the appropriate menu   label like this    body ab  n  ab  body ab  n  ab a color  333 background  dcdcdc text-decoration none        This code effectively highlights the    About  menu item and makes it appear   dark gray  When you label the rest of   the site and menu items  you ll end up   with a grouped selector that looks   something like this    body hm  n  hm  body hm  n  hm a  body sm  n  sm  body sm  n  sm a  body is  n  is  body is  n  is a  body ab  n  ab  body ab  n  ab a   body ct  n  ct  body ct  n  ct a color  333 background  dcdcdc text-decoration none        For example when the user navigates to   the sitemap section the  sm classed   body tag matches the  sm menu option   and triggers the CSS highlight of the    Sitemap  in the navigation bar    Source

User · Answer

1  You can use the  important rule  like this    selected     background-color red  important      See http   www w3 org TR CSS2 cascade html important-rules for more info   2  In your example you can also get the red background by using ul nav li selected instead of just  selected   This makes the selector more specific   See http   www w3 org TR CSS2 cascade html specificity for more info

User · Answer

Scenario  I have a navigation menu like this  Note  Link  lt a gt  is child of list item  lt li gt   I wanted to change the background of the selected list item and remove the background color of unselected list item    lt nav gt           lt ul gt               lt li gt  lt a href     gt Intro lt  a gt  lt  li gt               lt li gt  lt a href     gt Size lt  a gt  lt  li gt               lt li gt  lt a href     gt Play lt  a gt  lt  li gt               lt li gt  lt a href     gt Food lt  a gt  lt  li gt           lt  ul gt           lt div class  clear  gt  lt  div gt           lt  nav gt    I tried to add a class  active into the list item using jQuery but it was not working   active       background-color   480048        nav li a   click function                this  parent   addClass  active              this  parent   siblings   removeClass  active              Solution  Basically  using  active class changing the background-color of list item does not work  So I changed the css class name from  active to  nav li active a  so  using the same javascript it will add the  active class into the selected list item  Now if the list item  lt li gt  has  active class then css will change the background color of the child of that list item  lt a gt    nav li active a       background-color   480048

User · Answer

The ul nav li is more restrictive and so takes precedence  try this   ul nav li selected       background-color red

User · Answer

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

[css] CSS Change List Item Background Color with Class

Examples related to css

Examples related to colors

Examples related to background

Examples related to html-lists