How to style the first entry in a list differently
Tags: expressionengine, eecms
Published: 2021-03-03 14:14:25

---
title: How to style the first entry in a list differently
published: true
date: 2019-01-30 18:06:00 UTC
tags: ExpressionEngine,eecms
canonical_url: https://u.expressionengine.com//article/how-to-style-the-first-entry-in-a-list-differently
cover_image: https://u.expressionengine.com/asset/article-images/styleing-first-item-in-list.png
---

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](https://u.expressionengine.com/author/rob-allen) at [u.expressionengine.com](https://u.expressionengine.com/article/how-to-style-the-first-entry-in-a-list-differently)