applying css to specific li class

Question

I have a problem with my list   I want to specify certain colors for each li element but can t seem to do it   It keeps doing it for all of them     Here s my CSS    sub-nav-container ul       position  absolute      top  96px      left  594px      margin  0      padding  0      list-style-type  none      sub-nav-container li        margin  0      sub-nav-container a       display  block      text-decoration  none      border-bottom  none      color   C1C1C1      display  inline              li sub-navigation-home-news         color   C1C1C1      font-family  Arial      font-size  13 5px      text-align  center      text-transform  uppercase      padding  0px 90px 0px 0px       Here s the HTML     lt div id  sub-nav-container  gt       lt ul id  sub-navigation-home  gt           lt li class  sub-navigation-home-news  gt  lt a href     gt News lt  a gt  lt  li gt           lt li class  sub-navigation-home-careers  gt  lt a href     gt Careers lt  a gt  lt  li gt           lt li class  sub-navigation-home-client  gt  lt a href     gt Client Login lt  a gt  lt  li gt           lt li class  sub-navigation-home-canada  gt  lt a href     gt CANADA lt  a gt  lt  li gt           lt li class  sub-navigation-home-usa  gt  lt a href     gt USA lt  a gt  lt  li gt       lt  ul gt   lt  div gt

User · Answer

You have specified different colors for the li elements but it is being overridden by the specified color in the a within the li   Remove  color   C1C1C1  style from a element and it should work

User · Answer

I believe it s because  ID styles trump  class styles when computing the final style of an element  Try changing your li from class to id  or you can try adding  important to your class  like this   li sub-navigation-home-news       color   C1C1C1   important

User · Answer

Define them more in your css file   Instead of   li sub-navigation-home-news    try   sub-navigation-home li sub-navigation-home-news    Check this for more details  http   www w3 org TR CSS2 cascade html cascade

User · Answer

The CSS you have applies color  c1c1c1 to all  lt a gt  elements   And it also applies color  c1c1c1 to the first  lt li gt  element   Perhaps the code you posted is missing something because I don t see any other colors being defined

User · Answer

I only see one color being specified  albeit you specify it in two different places   Either you ve omitted some of your style rules  or you simply didn t specify another color

User · Answer

You are defining the color   C1C1C1  for all the a elements with  sub-nav-container a   Doing it again in li sub-navigation-home-news won t do anything  as it is a parent of the a element

User · Answer

That s because of the  lt a gt  in there and not using the id which you do use a bit further to the top  Change it to    sub-navigation-home li sub-navigation-home-news a     color   C1C1C1   font-family  arial   font-size  13 5px   text-align  center   text-transform uppercase   padding  0px 90px 0px 0px       and it will probably work

[html] applying css to specific li class

Examples related to html

Examples related to css

Examples related to html-lists