Css :last-of-type 🎨
Background info
In my opinion Css is easy to learn and difficult to master. That said, it's really a awesome langugage to work with.
Css has quickly become one of my favorite web technologies. That's partly because it's so underrated, but mostly because it can do so much! In this article I hope to show you one little trick that Css can do, that's the :first-of-type & :last-of-type pseudo-classes.
who is this for?
- Css Newbies
- Css Vets
- Anyone using Css and looking for a new trick to add to their toolbox.
:last-of-type
The :last-of-type selector allows you to target the last occurrence
of an element within it's container element.
How it it useful?
Take this example code block of an HTML nav bar:
<nav>
<a href='#' > Home</a>
<a href='#' > About </a>
<a href='#' > Projects </a>
</nav>
In this example the <nav/> is the container. If we wanted to target
the first element within the nav, which is the "Home" <a/>. We could
use the a:first-of-type selector like this:
a:first-of-type {
background: #ff414e;
}
a {
color: #fafafa;
background: palevioletred;
border-radius: 5px;
padding: 1rem;
margin-left: 1rem;
text-decoration: none;
}