CODEWITHSUNDEEP
cssformatting
Mokus
Mokus

Reputation: 10400

Formatting divs through css

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?

Upvotes: 2

Views: 264

Answers (2)

DBUK
DBUK

Reputation: 1373

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>

Upvotes: 1

easwee
easwee

Reputation: 15905

Yes (with pseudo selectors):

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

Note: supported only in browsers that support css3.

Upvotes: 7

Related Questions