Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Nth Child Last child where Odd

Nth Child Last child where Odd

Problem

I'm working on a blog theme, currently I have a post which has multiple images however the client wants them to be in a grid format so I did:

.photoset img{
    display: block;
    width:50%
    float: left;
}

This works fine however when there are an odd Number of images this doesn't work obviously.

How would I do a selector for the last child where odd? So I can then

[lastchildwhereodd]{
   width: 100%;
   display: block;
}
Problem courtesy of: ZeroBased_IX

Solution

You can combine both :nth-child(odd) and :last-child together:

.photoset img:nth-child(odd):last-child

Note that while :nth-last-child() is also available, it's not the right selector to use here because it counts backwards, which means :nth-last-child(odd) will always match :last-child regardless of whether there is an odd or even number of children.

Note also that the display: block declaration isn't necessary in either case because floating elements are always display: block.

Solution courtesy of: BoltClock

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Nth Child Last child where Odd

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×