<commit_before>+++
categories = ["Tech"]
date = "2017-04-25T20:10:19-04:00"
draft = false
subtitle = "Quick, specific styling tip"
title = "Grammatical CSS Lists"
toc = false
topics = [
  "css"
]
styles = ["syntax"]
+++



## The Situation

You have a list of items that you need to render with comma separation, and
an "and" at the end.

<!--more-->

For example:

`Cookies, rice, and farts`.

## The Problem

This display is traditionally done in business logic, creating
more complexity than this simple output warrants.

## The Solution

We can use pure CSS, using well supported pseudo-classes and pseudo-content.
Behold!

### HTML

```html
<ul class="list">
  <li class="item">Cookies</li>
  <li class="item">rice</li>
  <li class="item">farts</li>
</ul>
```

### CSS

```css
/* Boilerplate to inline the list. */
.item {
  list-style-type: none;
  display: inline-block;
}

/* Add a comma after each item. */
.item:after {
  content: ', ';
}

/* Add the word "and" between the last two items. */
.item:last-of-type:before {
  content: ' and ';
}

/* Remove the comma after the last item. */
.item:last-of-type:after {
  content: '';
}
```

## Takeaway

The beauty of this solution is that it's simple, idiomatic, and declarative,
and has the added benefit of taking a hard stand on oxford commas.

I use this solution here on this site for the "Topics" display. If it worked for
my little blog, it'll work for *anything* else![^1]

[^1]: The opinions expressed on my blog are not necessarily endorsed by me.<commit_msg>Add another trivial change to test deploy<commit_after>+++
categories = ["Tech"]
date = "2017-04-25T20:10:19-04:00"
draft = false
subtitle = "Quick, specific styling tip"
title = "Grammatical CSS Lists"
toc = false
topics = [
  "css"
]
styles = ["syntax"]
+++



## The Situation

You have a list of items that you need to render with comma separation, and
an "and" at the end.

<!--more-->

For example:

`Cookies, rice, and farts`.

## The Problem

This display is traditionally done in business logic, creating
more complexity than this simple output warrants.

## The Solution

We can use pure CSS, using well supported pseudo-classes and pseudo-content.
Behold!

### HTML

```html
<ul class="list">
  <li class="item">Cookies</li>
  <li class="item">rice</li>
  <li class="item">farts</li>
</ul>
```

### CSS

```css
/* Boilerplate to inline the list. */
.item {
  list-style-type: none;
  display: inline-block;
}

/* Add a comma after each item. */
.item:after {
  content: ', ';
}

/* Add the word "and" between the last two items. */
.item:last-of-type:before {
  content: ' and ';
}

/* Remove the comma after the last item. */
.item:last-of-type:after {
  content: '';
}
```

## Takeaway

The beauty of this solution is that it's simple, idiomatic, and declarative,
and has the added benefit of taking a hard stand on oxford commas.

I use this solution here on this site for the "Topics" display. If it worked for
my little blog, it'll work for *anything* else![^1]

[^1]: The opinions expressed on my blog are not necessarily endorsed by me.

{'fraction_non_alphanumeric': 0.1350210970464135, 'fraction_numerical': 0.012982797792924375, 'mean_word_length': 3.756172839506173, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5818015', 'n_tokens_mistral': 1069, 'n_tokens_neox': 996, 'n_words': 401}