Selecting the correct first child

Question

I've been trying to get my css to select the 'correct' first div but can't seem to isolate it. Here's my (stripped back, but correct) html:

<div id="page_container">
    <div></div> // this div has content, but no id or class
    <div class="holder"></div> // this div has content
    <div class="section"></div> // <<<< this is the div I want to select; the first div with the class 'section'
    <div class="section"></div> // I don't want to select other 'section's
    <div class="section"></div>
    <div class="section"></div>
</div>

CSS-wise, so far I have tried...

#page_container > div > .section:first-child {
    ...rules here
}

#page_container > div:first-child(.section) { // is this even valid?
    ...rules here
}

#page_container > div > div > .section:first-child {
    ...rules here
}

...without luck.

I may be experiencing a brain-fart, but how would I select just the first div with a class of 'section'?

Any help, much appreciated!

There's a quite elaborate answer on a same kind of question here: https://stackoverflow.com/a/8539107/4278038 — McVenco, Nov 29 '17 at 12:11
you can try this `#page_container > :not(.section) + .section {` — Aswin Ramesh, Nov 29 '17 at 12:19
@McVenco I have to say, if I had encountered that answer in my searching I, 1) wouldn't have known it was answering my question, and 2) wouldn't have understood it! — moosefetcher, Nov 30 '17 at 09:03

score 4 · Accepted Answer · answered Nov 29 '17 at 12:14

4

Try this.

#page_container .section{
  background: green;
  margin: 10px 0;
}

#page_container .section ~ .section {
    background: transparent;
}

<div id="page_container">
    <div>this div has content, but no id or class</div>
    <div class="holder">this div has content</div>
    <div class="section">this is the div I want to select; the first div with the class 'section'</div>
    <div class="section">I don't want to select other 'section's</div>
    <div class="section"></div>
    <div class="section"></div>
</div>

answered Nov 29 '17 at 12:14

Pons Purushothaman

2,225
1
14
23

This works! Thanks for the answer. – moosefetcher Nov 29 '17 at 13:23
@moosefetcher, Cheers! – Pons Purushothaman Nov 29 '17 at 13:37

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

You could use + Combinator.

Adjacent sibling combinator

The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.

Syntax: A + B

Example: h2 + p will match all <p> elements that directly follow an <h2>.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Example:

#page_container > .holder + .section {
    background: red;
}

<div id="page_container">
    <div>this div has content, but no id or class</div> 
    <div class="holder">this div has content</div> 
    <div class="section">this is the div I want to select; the first div with the class 'section'</div>
    <div class="section">I don't want to select other 'section's</div>  
    <div class="section"></div>
    <div class="section"></div>
</div>

Thanks for your reply. I maybe should have said that the actual page html is generated dynamically (angular.js), so I can't always guarantee that the 'holder' div will be present. Therefore I really need the css to focus on the 'section' class. — moosefetcher, Nov 29 '17 at 13:12

Selecting the correct first child

2 Answers2