First DIV has a different style than the rest

Question

I have a list of DIVs that share the same classes as follows:

<div class="content1"><div class="contentInner">Text1</div></div>
<div class="content1"><div class="contentInner">Text2</div></div>
<div class="content1"><div class="contentInner">Text3</div></div>
...

I want the first DIV with class="content1" to have a different style than the following DIVs of the same class. What is the CSS selector that can accomplish this? Thanks

you could add: id="specificdiv1" to the first div. Then in CSS you can use: #specificdiv1 to address it. You can have class and id in same div. — arleitiss, Mar 01 '15 at 17:17
possible duplicate of [CSS selector for first element with class](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) — David Kiger, Mar 01 '15 at 17:19

score 1 · Answer 1 · answered Mar 01 '15 at 17:19

CSS has a pseudo selector which is used in such scenario where you need to select the first element from similar elements i.e. :first-child

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

Example:

div.content1:first-child{

  /* your css */
}

Js Fiddle Demo

score 1 · Accepted Answer · answered Mar 01 '15 at 17:22

1

Use nth-of type selector.

.content1:nth-of-type(1){
  /* your style */
}

Using first-child only works if there is no sibling element before your desired div.

See fiddle here.

answered Mar 01 '15 at 17:22

jp-jee

1,502
3
16
21

score 0 · Answer 3 · answered Mar 01 '15 at 17:20

0

Use :not and :first-child pseudo selector of CSS to give specific css to the first div.

Example:

.content1:not(:first-child) {
    /* Common CSS for all divs except first div */
}

.content1:first-child {
    /* CSS for first div */
}

answered Mar 01 '15 at 17:20

Anupam Basak

1,503
11
13

score 0 · Answer 4 · answered Mar 01 '15 at 17:20

0

you can use the :first-child selector. e.g

.content1:first-child{
text-decoration:underline;
}

fiddle

answered Mar 01 '15 at 17:20

vbouk

308
2
7

First DIV has a different style than the rest

4 Answers4