Add Apply Styles To The Last Child Of A Specific Type as a css til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_645 TILs and counting..._
+_646 TILs and counting..._
 
 ---
 
@@ -87,6 +87,7 @@ _645 TILs and counting..._
 
 ### CSS
 
+- [Apply Styles To The Last Child Of A Specific Type](css/apply-styles-to-the-last-child-of-a-specific-type.md)
 - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md)
 - [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md)
 - [Lighten And Darken With SCSS](css/lighten-and-darken-with-scss.md)

css/apply-styles-to-the-last-child-of-a-specific-type.md

@@ -0,0 +1,41 @@
+# Apply Styles To The Last Child Of A Specific Type
+
+The
+[`:last-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child)
+pseudo-class is a way of specifying styling that will only be applied to an
+element if it is the last child among its siblings. What if we have elements
+that are declared amongst elements of another type? This can complicate that
+styling.
+
+The styling
+
+```css
+span:last-child {
+  color: red;
+}
+```
+
+won't take effect on our last `span` here
+
+```html
+<div>
+  <span>One</span>
+  <span>Two</span>
+  <span>Three</span>
+  <div>Something unrelated</div>
+</div>
+```
+
+because amongst its siblings it isn't the last.
+
+One way of getting around this is with the
+[`:last-of-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type)
+pseudo-class.
+
+```css
+span:last-of-type {
+  color: red;
+}
+```
+
+See a [live example here](https://codepen.io/jbranchaud/pen/JLEyLP).