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>

possible duplicate of [CSS selector for first element with class](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) — Peter, Jun 19 '15 at 07:15

score 4 · Accepted Answer · answered Jun 19 '15 at 07:16

4

I would suggest

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

answered Jun 19 '15 at 07:16

Villeneuve Michaël

138
8

score 2 · Answer 2 · answered Jun 19 '15 at 07:17

2

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

answered Jun 19 '15 at 07:17

Keith A

771
6
12

rch · Answer 3 · 2015-06-19T08:10:47.707

2

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

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

Fiddle Here

edited Jun 19 '15 at 08:10

answered Jun 19 '15 at 07:20

rch

91
2
7

score 2 · Answer 4 · answered Jun 19 '15 at 07:26

2

This will work

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

answered Jun 19 '15 at 07:26

sneha user3189021

94
8

score 1 · Answer 5 · answered Jun 19 '15 at 07:15

1

Use first-of-type selector. Source here

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

JSFiddle

answered Jun 19 '15 at 07:15

freewheeler

1,306
2
12
24

ahmad valipour · Answer 6 · 2015-06-19T07:27:28.057

1

with following code:

.news > div:first-child

edited Jun 19 '15 at 07:27

answered Jun 19 '15 at 07:15

ahmad valipour

293
2
11

score 0 · Answer 7 · answered Jun 19 '15 at 07:17

0

Try:

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

answered Jun 19 '15 at 07:17

Rajiv007

1,126
7
13

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

7 Answers7