Use Adjacency Instead of ":first-child"

I've often used the :first-child pseudo-selector to target the first item in my menus (usually to remove padding used by the other links). This is a poor approach because it overrides styles that were previously set.

Instead, use an adjacency combinator (~ or +), to target links following or immediately following the first one.

.menu li {
    padding: 10px;
}
/* Any following li */
.menu li ~ li {
    margin-left: 10px;
}
/* Immediately following li */
.menu li + li {
    margin-left: 20px;
}