Tengo un bucle en Blogger que selecciona las últimas 5 publicaciones. Quiero aplicar CSS diferente a la primera de estas últimas 5 publicaciones y CSS diferente a las otras 4 publicaciones.

El script actual aplica el mismo css a todos ellos, ¿cómo puedo mantener la primera publicación separada?

Aquí está el guión;

 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>