I have a loop in Blogger that selects the last 5 posts. I want to apply different css to the first of these last 5 posts and different css to the other 4 posts.

Current script applies same css to all of them, how can i keep first post separate.

Here is the script;

let postCount = 5;
    
     function funcrct(JSON) {
            const POSTS = JSON.feed.entry;
            let postTitle, postUrl = "";
            let rpc = document.querySelector(".postList");
            for (let i = 0; i < postCount; i++) {
                POSTS[i].link.forEach((el, i) => {
                    if (el.rel === "alternate") {
                        postTitle = el.title;
                        postUrl = el.href;
                    }
                })
        
                let thumbnail = POSTS[i].content.$t.match(/(http)?s?:?(\/\/[^"']*\.(?:webp))/)[0];
        
                rpc.innerHTML += `<li>
        <a href="${postUrl}"><figure>       
        <img src="${thumbnail}" alt="${postTitle}"/>
        <figcaption>
        ${postTitle}</figcaption></figure></a>
        </li>`;
            }
        }
        
        var url = document.location.origin;
        var fsrc = document.createElement("script");
        fsrc.src = `${url}/feeds/posts/default?alt=json-in-script&start-index=1&max-results=${postCount}&callback=funcrct`;
        
        
        document.body.appendChild(fsrc);

Html

<div><ul class='postList'></ul></div>