Search code examples
tumblrtumblr-themestumblr-html

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


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.


Solution

  • 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