CSS selector for first instance of child with class?

Question

Is there a CSS selector for the first instance of a child with class? For example, take this code:

<div id="container">
    <div class="nothing">
    </div>
    <div class="child"> <!-- SELECT THIS ONE -->
    </div>
    <div class="child"> <!-- NOT THIS ONE -->
    </div>
    <div class="child"> <!-- NOT THIS ONE -->
    </div>
</div>

Is there a css selector to style the first occurrence of a div with class "child"?

What have you tried? Have you had a look at http://api.jquery.com/category/selectors/, which lists all the selectors that jQuery understands? Personally, I would just use `$('.child').first()`. — Felix Kling, Aug 21 '13 at 16:22
No, there is no such selector using CSS. The closest thing is the `:first-of-type` selector, but that only matches by tag name, not class — tomaroo, Aug 21 '13 at 16:22
If you're looking for a CSS solution, then this is a duplicate. You can't do this with a single selector but there is a workaround that you might be able to use. See the link. — BoltClock, Aug 21 '13 at 16:28
`#container > div:nth-child(2){}` . But some properties won't be visible for empty DIV, try your browser development Inspector and find 'Copy Selector', for chrome its F12 — wpcoder, Mar 04 '17 at 21:51

canon · Answer 1 · 2015-03-26T12:51:29.143

9

You could style .child and revert styles for subsequent .child siblings using the general sibling combinator, ~:

.child {
  color: #ff0000;
}
.child ~ .child {
  color: inherit;
}

<div id="container">
  <div class="nothing">nothing
  </div>
  <div class="child">SELECT THIS ONE
  </div>
  <div class="child">NOT THIS ONE
  </div>
  <div class="child">NOT THIS ONE
  </div>
</div>

edited Mar 26 '15 at 12:51

answered Aug 21 '13 at 16:30

canon

40,609
10
73
97

2

or even better reset the color to inherit and it will return to default! – sidonaldson Aug 21 '13 at 16:39

score -2 · Answer 2 · answered Aug 21 '13 at 16:23

-2

You can use the ":nth-child" css selector.

DEMO: http://jsfiddle.net/2pyvz/

CSS:

.child:nth-child(2) { color:red; }

answered Aug 21 '13 at 16:23

Hirshy

367
3
16

2

Doesn't work: http://jsfiddle.net/fkling/Pex2R. Reason: `:first-child` selects the element *if and only if* it is the first child of its parent. In the OP's example, `div.nothing` is the first child though. – Felix Kling Aug 21 '13 at 16:24
Yeah, doesn't work for me either – Andrew Aug 21 '13 at 16:25
I updated the answer. Like previously mentioned `:first-child` only works on the first child of the its parent. See if `:nth-child` works for you. – Hirshy Aug 21 '13 at 16:29
2

`.child:nth-child(2)` selects the second child of its parent, not the first `.child` element. While it might work in this specific situation, it is not a solution to actual question. – Felix Kling Aug 21 '13 at 16:29
`:nth-of-type` will only select the nth of the same type of element. Being that in the example given the first child is a div element you can't use `:nth-of-type` to select the first one. – Hirshy Aug 21 '13 at 16:40

CSS selector for first instance of child with class?

2 Answers2