Is there a way to dynamically add a "last" class to the last post appearing in a Tumblr tag page?

Question

I was wondering whether it is possible to add a "last" class to the last post appearing in a tumblr tag page in order to be able to customize it in css?

The goal is the following: let us say that a certain tag has 3 posts, so when I navigate in that tag page, the 3 posts appear, one below the other. I would like the first two separated by a line located at the bottom of each post body, but the last one on the bottom of the page should not have a separation line at its bottom, so I guess I would need a specific class for that post since it is the last one.

Thank you.

You can just use a css selector `:last-of-type` or `:nth-child(last)` I dont know what your markup is, but I've made a crude example here: https://jsfiddle.net/lharby/39ap851L/ this will run on any page with post content though, so if you want to target only tagged posts you have to do a bit more trickery. — lharby, Jan 05 '22 at 10:24
It works!! can you please write it as an answer and not as a comment so I can select it as solved? Thanks — setnaps, Jan 05 '22 at 11:42

score 0 · Accepted Answer · answered Jan 05 '22 at 14:14

As per my comment you can achieve this by simply using a css selector :last-of-type or :nth-child(last)

Here is an example.

HTML:

<div id="posts">
    <div class="post">
        Post 1
    </div>
    <div class="post">
        Post 2
    </div>
    <div class="post">
        Post 3
    </div>
</div>

CSS:

#posts .post {
    margin-bottom: 20px;
    border-bottom: 2px solid #444;
}
#posts .post:last-of-type {
    background-color: orange;
    border-bottom: none;
}

There is a jsfiddle here: https://jsfiddle.net/lharby/39ap851L/

So each post item will have a border bottom, but for the last post of type we override this with border-bottom: none

Is there a way to dynamically add a "last" class to the last post appearing in a Tumblr tag page?

1 Answers1