Formatting divs through css

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?

http://stackoverflow.com/questions/7729566/separators-between-elements-without-hacks/7729610#7729610 — thirtydot, Nov 15 '11 at 10:29

score 7 · Accepted Answer · answered Nov 15 '11 at 10:23

7

Yes (with pseudo selectors):

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

Note: supported only in browsers that support css3.

answered Nov 15 '11 at 10:23

easwee

15,757
24
60
83

score 1 · Answer 2 · answered Nov 15 '11 at 10:28

CSS3 now lets us select a certain 'child' and apply styling like so:

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

However CSS3 is not a safe path to go down yet for older browsers so another option would be to give your last div the class of 'last' and styling it like so:

<div class="last">
  Lorem
</div>

.mainmenu .last{
 border: none;   
}

You can have multiple classes in a div so you can apply the 'last' option as well as whatever else the div is called e.g.

<div class="apple last">
  Lorem
</div>

Ya, it was more of an addition to let him know that it might not work in older browsers, but, yep, I should have specified that. — DBUK, Nov 15 '11 at 10:44

Formatting divs through css

2 Answers2