CSS Tricks – Automated Divider Lines on your Nav Menu + Image Grid spacing w/ :first & :nth-child

The Orphan Divider Problem

If you’ve been wondering how to put divider lines in your menu, and have been getting a orphan divider line because you used border-left property for example, this is a great and simple css trick to solve that problem:

| HOME | ABOUT | CONTACT | PRESS
^– uh oh!

SOLUTION:

CSS :first & :first-child

By creating a style element that targets only the first (or last.. if you used border-right) LI, you can tell that LI to have no border, or no padding/margin.

Because li is a child element of ul, you need to use li:first-child.

You can set an even more general rule (which does the same thing) – like to remove the border from every first child element (whatever it is.. though it will most likely be LI)

Select and style the first child element of every

element:

ul>:first-child {border-left:none;}
See more examples: www.w3schools.com/cssref/sel_firstchild.asp

Solves Padding/Margin Problems as well!

This is especially great for when you put even padding around each list item / or images too if you are spacing out images, and you realized that now your initial & end text/image are now indented and not flush with your container margins.

Using nth child to solve spacing issues on multiple lines

Note: Using :first to solve a spacing issue won’t help much when you’re dealing with multiple lines.. like for image grids. In that case, you can use an LI even or odd property, or nth child.

:even or odd

:nth-child(even) {background: red}
:nth-child(odd) {background: green}
Read more: www.w3.org/Style/Examples/007/evenodd.en.html

:nth-child

You can target a specific element:
ul li:nth-child(5) {
color: #ccc;
}

or target a repeating element.. like every 3rd element:
ul li:nth-child(3n+3) {
color: #ccc;
}

Read a more detailed guide about using nth child here: css-tricks.com/5452-how-nth-child-works/

Combining List child elements

 
  
 
 
  

   
One
   
Two
   
Three