how can i use css selector to give style only to a first div between two divs of the same kind?

Question

I want to give border to the first div with the class block in the code below:

<div class="col-md-4 news">
            <h3>News Feed</h3>
            <div class="block">
              <p class="date"><span>15</span>march</p>
              <p><a href="#">serving people from 23 branches all over the nepal</a></p>
              <div class="clearfix"></div>
            </div>
            <div class="block">
              <p class="date"><span>17</span>march</p>
              <p><a href="#">serving people from 23 branches all over the nepal</a></p>
              <div class="clearfix"></div>
            </div>
          </div>

Answer 1

I would suggest

.block:first-of-type {
 border: yourborder;
}

Answer 2

Use first-of-type selector. Source here

.block:first-of-type {
    border:2px solid red;
}

JSFiddle

Answer 3

with following code:

.news > div:first-child

Answer 4

Try:

.col-md-4.news h3 + .block{ border:solid 1px #000; }

Answer 5

  .col-md-4 .block:first-of-type{
      border:1px solid RED;
   }

Answer 6

You can use the first-of-type pseudo selector for this:

.news .block:first-of-type {border:1px solid #000;}

Fiddle Here

Answer 7

This will work

.block:first-of-type {
    border:solid 1px #ccc;    
}