pheromix pheromix - 4 months ago 6
CSS Question

How to remove the first and last elements from a selection?

I want to set margins to

li
elements :

<ul class="dropdown">
<li class="menuppal"><a href="#">Administration</a>
<ul>
<li><a href="#">Artificial Turf</a></li>
<li>
<a href="#">Batting Cages</a>
<ul>
<li><a href="#">Indoor</a>
<ul>
<li><a href="#">Garden</a></li>
</ul>
</li>
<li><a href="#">Outdoor</a></li>
</ul>
</li>
<li><a href="#">Benches &amp; Bleachers</a></li>
<li><a href="#">Communication Devices</a></li>
<li><a href="#">Dugouts</a></li>
<li><a href="#">Fencing &amp; Windscreen</a></li>
<li><hr></li>
<li><a href="#">Floor Protectors</a></li>
<li><a href="#">Foul Poles</a></li>
<li><a href="#">Netting</a></li>
<li><a href="#">Outdoor Furniture</a></li>
<li><a href="#">Outdoor Signs</a></li>
<li><hr></li>
<li><a href="#">Padding</a></li>
<li><a href="#">Scoreboards</a></li>
<li><a href="#">Shade Structures</a></li>
<li><a href="#"> - VIEW ALL - </a></li>
</ul>
</li>
...
</ul>


I want to set margin-top and margin-bottom for li elements like the "Batting Cages" element but not for the "Artificial Turf" elements. How to do that ?

MKD MKD
Answer

you just need to use css rule li:not(:first-child) for this purpose.Here is a simple example. Jsfiddle

.dropdown li:not(:first-child):not(:last-child)
{
    margin-top:10px;
    background:red;
}
Comments