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

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


Website Checklist before Launching

Top 20 things to consider before launching your website


Getting wireless printing working on Virgin Media Hub 3

A guide on how to get wireless printing working on Virgin Media if yours has suddenly stopped working.