CODEWITHSUNDEEP
cssthemestumblr
Josh Armstrong
Josh Armstrong

Reputation: 3

Change style of most recent Tumblr post

Ok, I've googled this for hours with no luck. I hope you can help and appreciate you doing so. I am working on a grid theme for tumblr. I want the most recent post to be formatted differently than the rest. Namely, I want it to be full page width and have different background-color and border attributes. In essence, creating a media header that continually updates to the most recent post.

A similar example is Digg.com. Their top post is 3 full page width and the rest of the "top posts" are in a 3 column grid.

I am pretty competent with html and css but not with js (yet). The site I'm working on is adventuresportlife.tumblr.com

Again, thanks for your help.

Upvotes: 0

Views: 308

Answers (1)

Twon-ha
Twon-ha

Reputation: 954

You can use the :nth-child(1) (CSS3) or :first-child (CSS 2) pseudo-classes. In this case, for example:

.masonry-brick:first-child {
    background-color: red;
    border: 2px solid black;
}

Your first element already has a unique ID now, with its own CSS rule from the inline style element:

#toppost {
    background-color: white;
    border-bottom: 1px solid green;
    width: auto;
}

EDIT: be aware though, that CSS2 pseudo-classes are supported in IE7 and IE8, while CSS3 pseudo-classes are not (source: caniuse.com). Since :first-child does the job, it might be wise to stick with that for maximum compatibility.

Upvotes: 4

Related Questions