Ideal way to handle layout changes in a list

Question

So I've stupidly designed a list of recent articles, all is good with the world BUT the first 2 entries html are markedly different then the remainder of entries.

I am yet to turn a line of code so any advice anyone an offer is greatly appreciated.

Simplistically the ul would look like:

<li class="1of2"> /* It's number 1 – give it a class to identify it as special */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
<li class="1of2"> /* It's number 2 – give it a class to identify it as special */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
<li> /* It's not number 1 or 2 – ie. every other item, NO class per se */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>

If you imagine a 3 column grid for all entries but the first 2 entries are 1.5 columns each. Bit of a noodle scratch going on here, any thoughts gratefully voted upon.

PS. I will be using Stash if that helps !

Answer 1

Just output the class name based on the value of {count}. I've output the whole opening <li> tag here to keep it simple but you could just output the class attribute or class name itself.

{if count<=2}
    <li class="special">
{if:else}
    <li>
{/if}
        <h1>{title}</h1>
        ... etc.
    </li>

Incidentally, I don't think you can have class names that begin with a number.

Answer 2

Here's how I would do it if you want each of the first 2 to have a unique class name:

<li{if count<=2}class="top{count}"{/if}>

that will output

<li class="top1">...
<li class="top2">...
<li>...

If you want the first 2 items to have the same class:

<li{if count<=2}class="whateveryouwant"{/if}>

which will output

<li class="whateveryouwant">...
<li class="whateveryouwant">...
<li>...