CODEWITHSUNDEEP
csscss-selectors
rpivovar
rpivovar

Reputation: 3438

Get nth-of-type to NOT target children of children?

I'm trying to target an <h1> element within a <div> using the CSS first-of-type property, but I noticed that not only does this target the first child of this <div> that is of type <h1>, but it also targets the children of children that are of type <h1>, which seems less useful to me. Is there any way that children of children can be excluded from this?

In the example below, I have an <h1> that's an immediate child of a <div> called #everything. I try targeting that <h1> in the CSS, but this results in targeting both the correct <h1> as well as another <h1> within a child <div>. 

#everything h1:first-of-type{
  color: red;
}
<div id="everything">
  <h1>hello</h1>
  <div id="something">
      <h1>goodbye</h1>
  </div>
</div>

Upvotes: 2

Views: 99

Answers (2)

Emipro Technologies Pvt. Ltd.
Emipro Technologies Pvt. Ltd.

Reputation: 14746

Update your css code with this.

#everything > h1{
    color: red;
}

One more option:

#everything:first-child > h1 {
    color: red;
}

For this option #everything:first-child you need to specify the child h1 or it's class/id.

Upvotes: 0

fen1x
fen1x

Reputation: 5870

Is this what you wanted?

#everything>h1:first-of-type{
  color: red;
}
<div id="everything">
  <h1>hello</h1>
  <div id="something">
      <h1>goodbye</h1>
  </div>
</div>

Upvotes: 1

Related Questions