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

About Steven Chu


Hi, I'm Steven! I'm an entrepreneur, photographer and art director in New York. Follow this blog for self expression, fun, and most importantly: looking comfortable, at ease, and amazing in your photos no matter who takes them! I dedicate this to my amazing friends who have let me inadvertently turn all of our hangouts and travel photos into a never ending photoshoot of fun. The proof is in the pudding-- our photos rock. My other projects: I'm the founder of InstaTechie.com, a face-to-face tech concierge service for NYC. Book a techie to walk you through something you want to learn! My work focuses on socially engaged art projects which use technology to create access to resources for communities. Visit Steven Chu Studio (stevenchustudio.com) for branding & design work or Steven Chu (stevenchu.com) for photography projects.

Leave a Reply