Selecting one specific class in an unordered list

I'm new to HTML/CSS and i'm trying to select one specific class for styling in an unordered list.

I want to be able to select the HTML code: <li class="nav-header"><a href="#">WOMEN'S WEAR</a></li> in CSS.

I have tried to select the code by using .dropdown-header:nth-child(2) for making changes on the width from 110px to 150px, but nothing happens.

` Here's the full code:

HTML:

    <nav class="navigation">
      <ul>
        <li class="nav-header"><a href="#">MEN'S WEAR</a>
          <ul class="dropdown-background">
            <li class="dropdown-header"><a href="#">TOPWEAR</a>
               <ul>
                <li><a class="browse" href="#">Jackets & Coats</a></li>
                <li><a class="browse"  href="#">Shirts</a></li>
                <li><a class="browse"  href="#">Overshirts</a></li>
                <li><a class="browse"  href="#">T-Shirts</a></li>
                <li><a class="browse"  href="#">Basic T-Shirts</a></li>
                <li><a class="browse"  href="#">Knitwear</a></li>
                <li><a class="browse"  href="#">Sweats</a></li>            
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">BOTTOMWEAR</a>
              <ul>
                <li><a class="browse"  href="#">Jeans</a></li>
                <li><a class="browse"  href="#">Colour Jeans</a></li>
                <li><a class="browse"  href="#">Pants</a></li>
                <li><a class="browse"  href="#">Shorts</a></li>   
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">FOOTWEAR</a>
              <ul>
                <li><a class="browse"  href="#">Boots</a></li>
                <li><a class="browse"  href="#">Sandals</a></li>
                <li><a class="browse"  href="#">Shoes</a></li>
                <li><a class="browse"  href="#">Snickers</a></li>         
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">ACCESSORIES</a>
              <ul>
                <li><a class="browse"  href="#">Belts</a></li>
                <li><a class="browse"  href="#">Caps</a></li>
                <li><a class="browse"  href="#">Hats</a></li>
                <li><a class="browse"  href="#">Scarves</a></li>
                <li><a class="browse"  href="#">Gloves</a></li>
                <li><a class="browse"  href="#">Sunglasses</a></li>
                <li><a class="browse"  href="#">Watches</a></li>
                <li><a class="browse"  href="#">Jewelry</a></li>              
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">SALE</a>
              <ul>
                <li><a class="browse"  href="#">Jackets & Coats</a></li>
                <li><a class="browse"  href="#">Shirts</a></li>
                <li><a class="browse"  href="#">Overshirts</a></li>
                <li><a class="browse"  href="#">T-Shirts</a></li>
                <li><a class="browse"  href="#">Basic T-Shirts</a></li>
                <li><a class="browse"  href="#">Knitwear</a></li>
                <li><a class="browse"  href="#">Sweats</a></li>            
              </ul>
            </li>
          </ul>
        </li>
      </ul>

      <ul>
        <li class="nav-header"><a href="#">WOMEN'S WEAR</a>
          <ul class="dropdown-background">
            <li class="dropdown-header"><a href="#">TOPWEAR</a>
             <ul>
                <li><a class="browse" href="#">Jackets & Coats</a></li>
                <li><a class="browse"  href="#">Shirts</a></li>
                <li><a class="browse"  href="#">Overshirts</a></li>
                <li><a class="browse"  href="#">T-Shirts</a></li>
                <li><a class="browse"  href="#">Basic T-Shirts</a></li>
                <li><a class="browse"  href="#">Knitwear</a></li>
                <li><a class="browse"  href="#">Sweats</a></li>            
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">BOTTOMWEAR</a>
              <ul>
                <li><a class="browse"  href="#">Jeans</a></li>
                <li><a class="browse"  href="#">Colour Jeans</a></li>
                <li><a class="browse"  href="#">Pants</a></li>
                <li><a class="browse"  href="#">Shorts</a></li>   
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">FOOTWEAR</a>
              <ul>
                <li><a class="browse"  href="#">Boots</a></li>
                <li><a class="browse"  href="#">Sandals</a></li>
                <li><a class="browse"  href="#">Shoes</a></li>
                <li><a class="browse"  href="#">Snickers</a></li>         
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">ACCESSORIES</a>
              <ul>
                <li><a class="browse"  href="#">Belts</a></li>
                <li><a class="browse"  href="#">Caps</a></li>
                <li><a class="browse"  href="#">Hats</a></li>
                <li><a class="browse"  href="#">Scarves</a></li>
                <li><a class="browse"  href="#">Gloves</a></li>
                <li><a class="browse"  href="#">Sunglasses</a></li>
                <li><a class="browse"  href="#">Watches</a></li>
                <li><a class="browse"  href="#">Jewelry</a></li>              
              </ul>
            </li>

            <li class="dropdown-header"><a href="#">SALE</a>
              <ul>
                <li><a class="browse"  href="#">Jackets & Coats</a></li>
                <li><a class="browse"  href="#">Shirts</a></li>
                <li><a class="browse"  href="#">Overshirts</a></li>
                <li><a class="browse"  href="#">T-Shirts</a></li>
                <li><a class="browse"  href="#">Basic T-Shirts</a></li>
                <li><a class="browse"  href="#">Knitwear</a></li>
                <li><a class="browse"  href="#">Sweats</a></li>            
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

CSS:

/* ------------------ NAVIGATION BAR ------------------ */
    .navigation {


      position: relative;
        background-color: #f5f5f5;
        width: 1024px;
        height: 42px;
        margin: 0 auto;
        border-bottom: 1px solid #ddd;

      -webkit-font-smoothing:antialiased;
    }

    .navigation a {
      -webkit-transition: all .25s ease;
          -moz-transition: all .25s ease;
           -ms-transition: all .25s ease;
            -o-transition: all .25s ease;
               transition: all .25s ease;
    }

    .nav-header:nth-child(1) { 
      width: 110px;
      height: 30px;
      float: left;
      padding-top: 13px;
      padding-left: 10px;
      list-style: none;
      position: relative;
      font-weight: bold;
        -webkit-transition: all .25s ease;
          -moz-transition: all .25s ease;
           -ms-transition: all .25s ease;
            -o-transition: all .25s ease;
               transition: all .25s ease;
     }


    .nav-header:hover {
      background: #000;
    }


    .nav-header ul {
      position: relative;
      overflow: hidden;
      visibility: hidden;
      top: 14px;
      opacity: 0;
      z-index: 1;
      -webkit-transition: all .25s ease;
         -moz-transition: all .25s ease;
          -ms-transition: all .25s ease;
           -o-transition: all .25s ease;
              transition: all .25s ease;  
    }

    .nav-header:hover ul {
      visibility: visible;
      opacity: 1;
    }
    .nav-header a {
      text-decoration: none;
      color: #000;
    }

    .nav-header:hover  a{
      color: #fff;

    }

    .dropdown-background {
      background: #000;
      width: 1024px;
      height: 265px;
      right: 10px;
    }

    .dropdown-header {
      position: relative;
      float: left;
      top: 10px;

    }

    .dropdown-header a {
      padding-right: 60px;
      color: #fff;
      padding-left: 10px;

    }

    .dropdown-header a:hover {
      text-decoration: underline;
    }

    .browse {
      font-weight: normal;
      font-size: 12px;
      line-height: 25px;
    }

    .browse:hover {
      text-decoration: underline;
    }

Answers


lets apply this pseudo element style.

nav ul:nth-of-type(2) > li.nav-header
{

  width:150px;
}

this will do the trick. Here is a Working Demo. http://jsbin.com/suxumefe/1/


HTML

<!--in html code add id-->
<li class="nav-header" id="womans-wear"><a href="#">WOMEN'S WEAR</a>
<!--end html-->

CSS

#womans-wear{

    /*add your styles in here*/
    width:150px;

}

Something like this, per the explanation above in the comments


The following will work:

.navigation ul:nth-of-type(2) > .nav-header a {
  width: 150px;
}

Though it should be noted, if you can add a class to the second ul that you are targeting, add it so that your style will work on browsers that do not support nth-of-type. Also, using an ID instead of a class is not preferred by many CSS authorities due to creating selectors that are too specific and difficult to override.


Need Your Help

Can I compile a class along with all of its inner classes to a single class file?

java compiler-construction

I've been working on a fairly simple project for a class. I knew it was supposed to be written in Java, and I read enough of the Assignment description to have an idea what I was supposed to be do...