Contents
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
Deutsch