CODEWITHSUNDEEP
css
Lisa
Lisa

Reputation: 3

CSS3 first div only trick

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.

<div class="container">
  <div class="row"> Stuff </div>
  <div class="row"> Stuff </div>
  <div class="row"> Stuff </div>
  <div class="row"> Stuff </div>
</div>

.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;}

Upvotes: 0

Views: 50

Answers (2)

Rich Bradshaw
Rich Bradshaw

Reputation: 73005

Either use:

.row:nth-child(1)

or

.row:first-of-type

or

.row:first-child

The top two are IE9+, but the last will work in IE8 as well.

Upvotes: 0

MarcinJuraszek
MarcinJuraszek

Reputation: 125650

.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)

Upvotes: 1

Related Questions