Apply css to immediate child element

Question

background-color: yellow;

<!DOCTYPE html>


<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <p>Paragraph 3. Not in a div.</p>
  <p>Paragraph 4. Not in a div.</p>
</div>

I want to apply background color for only the first <p></p> element inside the div.

tried some css selectors,couldn't get the expected result. Can anyone help me?

Possible duplicate of [CSS selector for first element with class](https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) — Andreew4x4, Feb 18 '19 at 09:29
@Andreew4x4 w3schools are not the W3C. They have no affiliation whatsoever. — Turnip, Feb 18 '19 at 09:33
First of all, there are already dozen questions like that: stackoverflow.com/questions/2717480/… Consider taking W3scools CSS tutorial: - https://www.w3schools.com/css/default.asp Useful links at this topic: - https://www.w3schools.com/cssref/sel_element_gt.asp - https://www.w3schools.com/cssref/sel_firstchild.asp — Andreew4x4, Feb 18 '19 at 09:37

score 3 · Accepted Answer · answered Feb 18 '19 at 09:19

3

Here you go.

div>p:first-child {
  background-color: yellow;
}

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <p>Paragraph 3. Not in a div.</p>
  <p>Paragraph 4. Not in a div.</p>
</div>

jsFiddle

answered Feb 18 '19 at 09:19

Andy Hoffman

18,436
4
42
61

Apply css to immediate child element

1 Answers1