CSS selector for first element without class

Question

I'm new to css and I have some auto generated snippet as following,

<div id="display">
  <div>
      <div>
        <p>red</p>
      </div>
      <div>
        <p>not red</p>
      </div>
    </div>
</div>

I have attached auto generated element into display div (first div) through javascript snippet. I want to select only first paragraph using CSS.

I tried following CSS also tried nth-child(1) ,

p:first-child {
    color:red;
}

But it's selecting both of the values.

yes, that's the issue I'm facing here. Those all those auto generated divs only contains same height, width and positions. Which I have added into sample for simplicity — Mayur
– Mayur, Commented Jul 15, 2020 at 21:21
@jbutler483 Thanks you for quick working solution. Could you please point me to understand concept of '>' ? — Mayur
– Mayur, Commented Jul 15, 2020 at 21:23
You may accept @Barmar 's solution as it does the same thing — jbutler483
– jbutler483, Commented Jul 15, 2020 at 21:23
That is the direct child operator. So will target a div immediately contained within the parent #display. A good explanation can be found here — jbutler483
– jbutler483, Commented Jul 15, 2020 at 21:27

Barmar · Accepted Answer · 2020-07-15 21:20:54Z

2

Both <p> elements are the first child of their respective parent DIVs. You want the <p> that's the child of the first child DIV.

div:first-child > p {
  color: red;
}

<div id="display">
  <div>
    <div>
      <p>red</p>
    </div>
    <div>
      <p>not red</p>
    </div>
  </div>
</div>

answered Jul 15, 2020 at 21:20

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdelmonaem Shahat · Accepted Answer · 2020-07-15 21:25:48Z

0

you can use first-of-type also to achieve that goal

 div:first-of-type > p {
  color: red;
}

<div id="display">
  <div>
    <div>
      <p>red</p>
    </div>
    <div>
      <p>not red</p>
    </div>
  </div>
</div>

answered Jul 15, 2020 at 21:25

5422 silver badges7 bronze badges

Sasha Salyha · Accepted Answer · 2020-07-15 21:31:27Z

0

#display > div > div:first-child > p{ color: red }

answered Jul 15, 2020 at 21:26

Sasha Salyha

612 bronze badges