How Do I use CSS to change the first element within a class
I would like to have the first li (General Resources) to have different formatting. How do I accomplish this with CSS? I have tried "first-child" & "nth-child" with no luck.
<div class="col-lg-3 col-lg-pull-9 col-md-4 col-md-pull-8 col-sm-5 col-sm-pull-7 leftnav">
<div class="leftnavcontent">
<div id="leftnav">
<div class="menu-general-resources-container">
<ul id="menu-general-resources" class="menu">
<li id="menu-item-363" class="menu-item-first menu-item menu-item-type-custom menu-item-object-custom menu-item-363"><a>General Resources</a></li>
<li id="menu-item-359" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-359"><a href="http://www.abc.com">A</a></li>
<li id="menu-item-368" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-368"><a href="http://www.def.com">B</a></li>
<li id="menu-item-369" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-369"><a href="http://www.ghi.com">C</a></li>
<li id="menu-item-370" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-370"><a href="http://www.jkl.com">D</a></li>
<li id="menu-item-371" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-371"><a href="http://www.mno.com">E</a></li>
<li id="menu-item-372" class="menu-item-last menu-item menu-item-type-post_type menu-item-object-page menu-item-372"><a href="http://www.pqr.com">F</a></li>
</ul>
</div>
</div>
</div>
</div>ASKER
I want to change the font size & color. Also remove the list style, change the padding and font-family. Basically the first Item in the list will be the list header.
#leftnav ul {
line-height: 24px;
padding-top: 80px !important;
padding-left: 100px !important;
color: #2865a9;
font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
font-size: 12px;
list-style-image: url(images/bullet.jpg);
text-decoration: none;
}
#leftnav li a {
font-family: Tahoma,Geneva,sans-serif;
color: #2865a9;
font-size: 12px;
text-decoration: none;
margin-top: -8px;
font-style: italic;
padding-left: 0px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
display: inline !important;
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Works PERFECT! Thank you.
What styles are you trying to apply to it? You should be able to target the first li using the methods you mentioned, or even the .menu-item-first class. But depending on what you're trying to do to it, you may have to use different styles. Can you post the CSS you are using?