CODEWITHSUNDEEP
cssmenu
Jeremi Liwanag
Jeremi Liwanag

Reputation: 964

Pseudo Class Last Child

I'm trying to achieve the separator effect using border-right on my menu. Here's my css code

ul.navigation li a {
text-decoration:none;
float:left;
width:252px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:45px;
color:#000;
position:relative;
border-right:1px solid #333;
}

ul.navigation li a:last-child {
border:none;
}

What am I doing wrong? I tried border-left and :first-child too.

Upvotes: 0

Views: 107

Answers (2)

G.G.
G.G.

Reputation: 674

Your CSS snippet is full of bad practices.

Below is an example of how you should style it and how you can add a separator between each list item.

.navigation { overflow: hidden; }    /* Explanation 1 */
.navigation li { float: left; }

.navigation li + li {                /* Explanation 2 */
    border-left: 1px solid #333;
}

.navigation li a {
    display: block;
    width: 252px;                    /* Explanation 3 */
    padding: 5px 0;                  /* Explanation 4 */

    background-color:#ccc;
    color:#000;
    text-align:center;            
}

  1. Float containment: read this article.

  2. Here I answer your question: applies a border left from the 2nd li to the last one, using the adiacent sibling selector +.

  3. Are you sure you want to have a fixed width?

  4. No fixed height and line-height to vertically align the text. line-height doen't need a unit by the way. Read this article.

    Here is a live example: http://dabblet.com/gist/4968063

Upvotes: 0

Bram Vanroy
Bram Vanroy

Reputation: 28437

I am thinking you mean to do this

ul.navigation li:first-child a

Because every a is the first child of its parent li. You mean the a inside the first li item. :)

Upvotes: 3

Related Questions