Nohman
Reputation: 121
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;
}
Upvotes: 1
Views: 862
Answers (3)
pxwise
Reputation: 1360
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.
Upvotes: 0
Kheema Pandey
Reputation: 10285
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/
Upvotes: 2
Josh Engelsma
Reputation: 2646
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
Upvotes: 1
Related Questions
- How can I select a class in a class in css?
- How do I select an element that has a certain class?
- How to select only the parent of an unordered list, using only CSS?
- Select item from unordered list in html
- Select childs of a class in CSS
- Selecting list of elements within specific class: CSS
- Select class within a class in CSS
- How can I select an element with two classes?
- How to select inner div in an unordered list
- How to only select this class?