CODEWITHSUNDEEP
htmlcss
Martynas Dargis
Martynas Dargis

Reputation: 27

defining lastchild of div inside ul tags

My structure looks like this:

<div style="">                                                                                       
<ul>      
  <h1>Some text</h1>
  <div class="border">
     <li><a href="#">Some text</a></li>
  </div>
</ul>

<ul>      
  <h1>Some text</h1>
  <div class="border">
     <li><a href="#">Some text</a></li>
  </div>
</ul>
</div>

I want to select div.border:last-child but when I write in my css file

//css-file//
.border:last-child: solid 1px black;
//or//
div .border:last-child: solid 1px black;
//or//
div ul .border:last-child: solid 1px black;

The problem is my pseudo class :last-child is being ignored, all divs with border class get styled, I want only the last child get borders.

here is an example: http://jsfiddle.net/H3uKp/

I'm using google chrome

Upvotes: 1

Views: 105

Answers (2)

klipie245
klipie245

Reputation: 1

Actually another way of doing this would be like so

<div style="">                                                                                       
<ul>      
  <h1>Some text</h1>
     <li><a href="#">Some text</a></li>
    <h1>Some text</h1>
     <li><a href="#">Some text</a></li>
</ul>

And then just add the styling

   li {
    border: 1px solid black;
}
    li:last-child {
        border: none;
    }

Tested this in jsFiddle and it works just fine.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157344

Your markup is incorrect, an ul element cannot contain any other child element except li, what you can do is like this

<ul>
   <li></li>
   <li><div></div></li>
</ul>

and than use

ul li:last-of-type {
   border: /* Whatever */ ;
}

And if you want to target div than use

ul li:last-of-type div {
   border: /* Whatever */ ;
}

Upvotes: 3

Related Questions