Reputation: 159
I need to delete the left-border from the first item and the right-border from the fourth item in a list without affecting any of the sub lists of those items. How can I do this?
My code for the menu list is:
<div id="menu">
<ul><li><a href="#">First Item</a><ul>
<li><a href="#">First Sub Item</a></li>
<li><a href="#">Second Sub Item</a></li>
</ul></li></ul>
<ul>
<li><a href="#">Second Item</a>
<ul>
<li><a href="#">First Sub Item</a></li>
<li><a href="#">Second Sub Item</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Third Item</a>
<ul>
<li><a href="#">First Sub Item</a></li>
<li><a href="#">Second Sub Item</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Fourth Item</a>
<ul>
<li><a href="#">First Sub Item</a></li>
<li><a href="#">Second Sub Item</a></li>
</ul>
</li>
</ul>
</div>
that is the code i add border with
#menu ul li a { padding: 10px; display: inline-block; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCC; border-left-color: #000; }
and i used this code to delete the border from the first child
#menu ul:first-child a { border-left: 0px; }
it works perfectly but when i do the same to delete from last-child ,, it effects the sub items ul li ul li a not ul li a
i can't manually add class to last child as it comes dynamically so i don't know how many items the admin will add at the future
Upvotes: 1
Views: 835
Reputation: 1720
try this one
#menu ul li a { padding: 10px; display: inline-block; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCC; border-left-color: #000; color:#000; }
#menu > ul:first-child > li > a { border-left: 0px;}
#menu > ul:last-child > li > a { border-right: 0px}
Upvotes: 1
Reputation: 8154
First Item:
#menu ul:first-child
Last Item:
#menu ul:last-child
For full browser compatibility, add another class to the first and last elements
<ul class="first-list">
<li><a href="#">First Item</a><ul>
<li><a href="#">First Sub Item</a></li>
<li><a href="#">Second Sub Item</a></li>
</ul></li></ul>
<ul>
<li><a href="#">Second Item</a>
...
<ul class="last-list">
<li><a href="#">Fourth Item</a>
<ul>
<li><a href="#">First Sub Item</a></li>
<li><a href="#">Second Sub Item</a></li>
</ul>
</li>
</ul>
.first-list {}
.last-list {}
Most languages support detectors for first and last entries in queries or arrays.
OR
If you're using jquery, you can select like so:
$('#menu ul:first').addClass('first-list')
Upvotes: 0
Reputation: 27640
#menu ul:first-child { border-left: 0; }
#menu ul:last-child { border-right: 0; }
Note that last-child isn't supported in IE until IE9. First-child should work in IE7 and up.
Upvotes: 1