Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 first div only trick

CSS3 first div only trick

Problem

I have a container with a bunch of divs. I want a top-border of grey on all of them except the first one should be top border of white. I tried nth-child but something seems wrong in my code.

Stuff
Stuff
Stuff
Stuff
.row{ border-top-width: 1px; border-top-style: solid; border-top-color: #ccc;} .row:nth-child1{ border-top-width: 1px; border-top-style: solid; border-top-color: #FFF;}
Problem courtesy of: Lisa

Solution

.row { border-top: 1px solid #ccc;}
.row:first-child {  border-top-color: #FFF;}

jsFiddle: http://jsfiddle.net/MSDYY/

and another one, with background set to red, to show that there actually is white top border over first element: http://jsfiddle.net/MSDYY/1/

If you want to use nth-child it should look like this way: .row:nth-child(1)

Solution courtesy of: MarcinJuraszek

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 first div only trick

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×