How to style the first entry in a list differently

Let’s say you have a list of news stories but you want to style the first entry differently. It’s quite a common pattern that we all need to deal with at some point. Luckily ExpressionEngine allows you to do this in more that one way.

Counting the entries

EE has a count variable that literally provides a count on the entries in a list. The first will have a value of “1”, the second “2” and so on.

In this example our list of entries will all have the same styling:

{exp:channel:entries channel="news" limit='10'}
<article>
    <h1>{title}</h1>
    {summary}
</article>
{/exp:channel:entries}

So let’s say we want to apply a CSS class to the first article tag using a conditional tag with the count number so we can style it differently:

{exp:channel:entries channel="news" limit='10'}
<article {if count == 1}class="first"{/if}>
    <h1>{title}</h1>
    {summary}
</article>
{/exp:channel:entries}

Wasn’t that easy?

What if we wanted to use different HTML heading tag for the first entry? Let’s tweak our tag so that happens:

{exp:channel:entries channel="news" limit='10'}
<article>
{if count == 1}
  <h1>{title}</h1>
{if:else}
  <h2>{title}</h2>
{/if}
  {summary}
</article>
{/exp:channel:entries}

See what we’ve done here? If the entry count is “1” use a h1 tag for the title, otherwise use a h2.

Let’s tweak our example again so we use different HTML just for the first entry:

{exp:channel:entries channel="news" limit='10'}
{if count == 1}
  <article>
      <h1>{title}</h1>
      {summary}
      {body}
  </article>
{if:else}
  <section>
    <h2>{title}</h2>
    {summary}
  </section>
{/if}
{/exp:channel:entries}

What happens now, the first entry gets wrapped in an article tag, subsequent entries get wrapped in a section tag.

Let’s extend that a bit further. Say we want to style both the first and second entries differently:

{exp:channel:entries channel="news" limit='10'}
{if count == 1}
  <article class="first">
      <h1>{title}</h1>
      {summary}
      {body}
  </article>
{if:elseif count == 2}
  <article class="second">
    <h2>{title}</h2>
    {summary}
  </article>
{if:else}
  <section>
    <h2>{title}</h2>
    {summary}
  </section>
{/if}
{/exp:channel:entries}

See how we use an extended conditional to loop through the entries and provide different CSS classes for just the first two entries.

Finally, let’s say you wanted to style the last entry differently. ExpressionEngine has a total_results variable that’s available to do that.

{exp:channel:entries channel="news" limit='10'}
<article{if count == total_results} class="last"{/if}>
    <h1>{title}</h1>
    {summary}
    {if count == total_results}
        This is the last entry
    {/if}
</article>
{/exp:channel:entries}

What we’re doing here, if the entry is the last one we apply a CSS class name to the article tag, and provide a message “This is the last entry”.

Using two separate tags

Sometimes using two channel entries tags may be necessary, say to get the desired document structure.

In this example we’re using the first channel entries tag to pull in the first entry using an article tag, then listing subsequent entries in an aside tag.

{exp:channel:entries channel="news" limit="1"}
<article>
  <h1>{title}</h1>
  {summary}
  {body}
</article>
{/exp:channel:entries}

<aside>
{exp:channel:entries channel="news" limit="9" offset='1'}
  <h2>{title}</h2>
  {summary}
{/exp:channel:entries}
</aside>

Note the second tag is limited to nine entries, along with an offset="1" parameter. The offset tells ExpressionEngine to get the latest nine news entries except the first one.

--

Originally published by Rob Allen at u.expressionengine.com