Question

I have the following structure

<div class="mainmenu">
    <div>
      Home
    </div>
    <div>
      About us
    </div>
    <div>
      Lorem
    </div>
</div>

.mainmenu div
{
     border-right:1px #000 solid;
}

With this I can enable the right border for all divs, but I don’t want border in the last div. Is it possible to control this through css, without modifying the structure above?

Answer 1

Yes (with pseudo selectors):

.mainmenu div:last-child
{
     border-right:none;
}

Note: supported only in browsers that support css3.