Conditionals: Manipulate a Class or ID Attribute of Elements in Channel Entries

There are plenty of reasons why we sometimes need to have the first or last element in a row to have a different Class than its siblings. If, for example, I wanted to create an unordered list of which the last list item was to contain a different CSS rule than any of the other list items, I'd simply create a class for it within my CSS stylesheet and reference that via the class attribute inside my HTML element:

1. <ul id="nav">
2. <li><a href="homepage.html">Home</a></li>
3. <li><a href="about.html">About</a></li>
4. <li class="last"> <a href="contact.html">Contact</a></li>
5. </ul>

I might also want to change the last class attribute for the third weblog entry because I've decided that I want my last column to not have any margins.

There are plenty of ways to go about altering the first, last, or odd item, but I've chosen to use one of the very simple means, namely using ExpressionEngine's built-in conditional global variables.

So, to be clear: What I want is to have three columns in a row. All three columns have the same class, in this case the class is column. I want the third column to have the additional CSS class last-item because I'd like to change the value of this item's margin. Yes, we could use CSS' ":last-child" or "nth-child" property, but that's for another day. Today, I'd just like to show you how you can manipulate small chunks of code - or large chunks for that matter - by simply using EE's conditionals and variables. You can apply this logic to pretty much any piece of code you'd like to modify.

Raw HTML code without ExpressionEngine tags:

1. <div class="column">
2. <h2>My title</h2>
3. <p>My excerpt</p>
4. </div>

But we want to take advantage of EE's tags and create dynamic content, so our code will now look like this:

1. {exp:weblog:entries weblog="blog" limit="3"}
2. <div class="column">
3. <h2>{title}</h2>
4. <p>{excerpt}</p>
5. </div>
6. {/exp:weblog:entries}

The third entry needs a second class appended to the HTML. I'm giving it a class name of "last-item".

1. {exp:weblog:entries weblog="blog" limit="3"}
2. <div class="column {_if count == 3}last-item{/_if}">
3. <h2>{title}</h2>
4. <p>{excerpt}</p>
5. </div>
6. {/exp:weblog:entries}

(remove the underscore before the opening and closing if)

What's changed? If you look at the class attribute of the div, you'll see that I've added a conditional global variable, namely the if conditional. In addition to that I've applied the single variable {count}. In plain English it reads as follows: "If the item is equal to 3 (the third item), then append the CSS class last-item to the HTML element."

And that's it. There are plenty of conditional global variables and single variables that allow for tons of flexibility without resorting to add-ons.

In closing it should be noted that this technique works for EE2 as well. Replace weblog with channel and you're good to go.