CSS last-of-type as a fix for last-child in Ember applications

A fix for last-child with CSS in Ember applications and others

Today I was scratching my head wondering why a basic last-child selector wasn’t working on a page I was styling up. A quick look at the DOM reminded me that Ember likes to litter the DOM with <script> tags.

So instead of having a nice list like;


We get something similar to:

  <script id="metamorph-1-start" type="text/x-placeholder"></script>
  <script id="metamorph-1-end" type="text/x-placeholder"></script>
  <script id="metamorph-2-start" type="text/x-placeholder"></script>
  <script id="metamorph-2-end" type="text/x-placeholder"></script>

When we use last-child in CSS it is normally on a repeating collection of things so we don’t really think about the elements around them. In the example above however <li>Two</li> is not the last-child of anything, that last <script> tag is.

In comes last-of-type

Luckily there is a way around this with the last-of-type selector in CSS. This works exactly the same as last-child only it takes the type of the elements into consideration.

This means the following CSS will now work as expected;

ul li::after { content: ", "}
ul li:last-of-type::after { content: ""}

Not just Ember

Whilst this is the first time I have had to think about things like this, I think I will be using this method from now on – it is more strict and acts exactly how I want it to act. With front end web development at the moment there could be several things making changes to the DOM on the fly and potentially knocking out things like last-child.

Recent posts View all


Iterate over indexed params in Rails

When your API isn't Rails-shaped, sometimes you need to handle input differently

Web Dev Jekyll

Running Jekyll from inside VS Code

How to set up your VS Code to run Jekyll without needing extra extensions