Is there a CSS selector for the first direct child only?

Question

I have the following html

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

And the following style:

DIV.section DIV:first-child 
{
  ...
}

For some reason that I don't understand the style is getting applied to the "sub contents 1" <div> as well as the "header" <div>.

I thought that the selector on the style would only apply to the first direct child of a div with a class called "section". How can I change the selector to get what I want?

http://jsfiddle.net/joelpurra/7t5CK/ – Joel Purra Jun 19 '12 at 00:41 — Joel Purra, Jun 19 '12 at 00:41

Matchu · Accepted Answer · 2015-07-14T21:11:35.327

665

What you posted literally means "Find any divs that are inside of section divs and are the first child of their parent." The sub contains one tag that matches that description.

It is unclear to me whether you want both children of the main div or not. If so, use this:

div.section > div

If you only want the header, use this:

div.section > div:first-child

Using the > changes the description to: "Find any divs that are the direct descendents of section divs" which is what you want.

Please note that all major browsers support this method, except IE6. If IE6 support is mission-critical, you will have to add classes to the child divs and use that, instead. Otherwise, it's not worth caring about.

edited Jul 14 '15 at 21:11

answered Jan 19 '10 at 15:21

Matchu

83,922
18
153
160

11

:first-child is not required, in this case. – eozzy Jan 19 '10 at 15:22
5

it seems the OP is not asking about the selector as much as why the rule is being applied to all the child divs. – Doug Neiner Jan 19 '10 at 15:29
My interpretation is that he gets the concept of CSS inheritance, and thought first-child would have the effect that > has. It's rather unclear wording. – Matchu Jan 19 '10 at 15:30
3

Ah, the joys of being old enough to remember when the 'direct descendent' selector would solve all your problems but you couldn't use it because _it didn't work in IE_. Much unnecessary frustration would then ensue. – aroth Apr 26 '17 at 07:07
2

It applies to the first child of the firs child also. If really need to apply the changes only on the first child we have to cancel the changes on the children of the child. Something like this: `div.section > div:first-child > div { /* Cancel Changes*/}` – MJBZA Mar 08 '19 at 13:16
This answer is wrong, it doesnt accomplish what OP is asking. @MJBZA 's answer is the correct one – Aldimir Oct 06 '22 at 11:04

score 104 · Answer 2 · answered Jul 27 '17 at 15:40

104

Found this question searching on Google. This will return the first child of a element with class container, regardless as to what type the child is.

.container > *:first-child
{
}

answered Jul 27 '17 at 15:40

Tom Gullen

61,249
84
283
456

10

The asterisk is not necessary here. `.container > :first-child` will work just as well – CalamityAdam Dec 06 '21 at 16:26

score 51 · Answer 3 · answered Jan 19 '10 at 15:26

CSS is called Cascading Style Sheets because the rules are inherited. Using the following selector, will select just the direct child of the parent, but its rules will be inherited by that div's children divs:

div.section > div { color: red }

Now, both that div and its children will be red. You need to cancel out whatever you set on the parent if you don't want it to inherit:

div.section > div { color: red }
div.section > div div { color: black }

Now only that single div that is a direct child of div.section will be red, but its children divs will still be black.

score 39 · Answer 4 · answered Aug 14 '19 at 12:35

The CSS selector for the direct first-child in your case is:

.section > :first-child

The direct selector is > and the first child selector is :first-child

No need for an asterisk before the : as others suggest. You could speed up the DOM searching by modifying this solution by prepending the tag:

div.section > :first-child

score 8 · Answer 5 · answered Jan 19 '10 at 15:26

8

Use div.section > div.

Better yet, use an <h1> tag for the heading and div.section h1 in your CSS, so as to support older browsers (that don't know about the >) and keep your markup semantic.

answered Jan 19 '10 at 15:26

ЯegDwight

24,821
10
45
52

Good idea, unfortunately I also need to support IE6, and if I use h1, I will need to set font-size to inherit so that the font matches that of the body, and ie7 and below don't support inherit. arg! – Jeremy Jan 19 '10 at 21:12
Also, I have child divs and putting child divs in an h1 breaks the rules, even though IE renders it, I'm not sure what other browsers do – Jeremy Jan 21 '10 at 19:33

score 7 · Answer 6 · answered Jan 19 '10 at 15:22

7

div.section > div

answered Jan 19 '10 at 15:22

eozzy

66,048
104
272
428

Richard Albrecht · Answer 7 · 2022-07-25T14:42:29.727

Not exactly the question asked, but maybe useful:

div.section > :first-child:is(div)

This would match only the first child element of .section and only if it was a div.

Match:

<div class="section">
  <div>MATCH</div>
  <div>NO MATCH</div>
  <div>
     <div>NO MATCH</div>
  </div>
</div>

No match:

<div class="section">
  <img ... >
  <div>NO MATCH</div>
  <div>NO MATCH</div>
  <div>
     <div>NO MATCH</div>
  </div>
</div>

score 1 · Answer 8 · answered Nov 16 '22 at 14:38

1

This is how I solved when using TailwindCSS (v3.1) with arbitrary variants. I only wanted the first column in table to be underlined when hovered, as it is a link.

[&>:first-child]:hover:underline

answered Nov 16 '22 at 14:38

Emre

831
11
13

Is there a CSS selector for the first direct child only?

8 Answers8

Linked

Related