CSS: Target the first object of each class

Question

I have a list of tags with 2 possible classes: P1 and P2. I want to apply CSS to the first item of each class. It doesn't work neither in my project nor in the fiddle

Why is that?

.A>.B>.C>.P1:first-child {
  font-weight: bold;
}

.A>.B>.C>.P2:first-child {
  font-style: italic;
}

;

<div class="A">
  <div class="B">
    <div class="C">
      <p class='P1'>
        "JAJA P1"
      </p>
      <p class='P1'>
        "JAJA P1"
      </p>
      <p class='P2'>
        "JAJA P2"
      </p>
      <p class='P2'>
        "JAJA P2"
      </p>
    </div>
  </div>
</div>

score 4 · Answer 1 · answered May 05 '17 at 13:49

:first-child means "The element is the first child element inside its parent element". It doesn't mean "The element is the first child element inside its parent element that matches some other condition".

While there is a :first-of-type pseudo-class, there is no :first-of-class pseudo-class. CSS doesn't directly support what you want to achieve.

You can get close, and it supports the particular properties you want to set, with the general sibling combinator.

.p2 { font-style: italic; }
.p2 ~ .p2 { font-style: normal; }

You set all the matching elements to be italic and then set the subsequent ones to be not-italic.

score 2 · Accepted Answer · answered May 05 '17 at 13:45

:first-child is an element selector so you can't use it to select the first of each class - it is just for selecting the first child of a parent element.

Instead, you can try the following trick:

style all of the class with your first child style
remove that style from following siblings

.C>.P1 {
  font-weight: bold;
}

.C>.P1~.P1 {
  font-weight: normal;
}

.C>.P2 {
  font-style: italic;
}

.C>.P2~.P2 {
  font-style: normal;
}

<div class="A">
  <div class="B">
    <div class="C">
      <p class='P1'>
        "JAJA P1"
      </p>
      <p class='P1'>
        "JAJA P1"
      </p>
      <p class='P2'>
        "JAJA P2"
      </p>
      <p class='P2'>
        "JAJA P2"
      </p>
    </div>
  </div>
</div>

score 0 · Answer 3 · edited May 23 '17 at 12:34

0

It's cause you use the > selector. It selects the immediate children

CSS '>' selector; what is it?

That will work as you want :

.A .P1:first-child {
  font-weight: bold;
}
.A .P2:first-child {
  font-style: italic;
};

edited May 23 '17 at 12:34

Community

1
1

answered May 05 '17 at 13:43

Thomas Rbt

1,483
1
13
26

That won't work. (a) There aren't `` or `` elements in HTML. (b) None of the `.P2` elements are the first child in their parent element. – Quentin May 05 '17 at 13:45

Janis Rozenfelds · Answer 4 · 2017-05-07T00:07:30.987

You can try simple method by selecting (odd) https://jsfiddle.net/ob0y953n/13/.

More can read about ":nth-child" here

 .A p:nth-child(odd) {
        color: #fff;
        background-color: grey; }

<div class="A">
  <div class="B">
    <div class="C">
      <p class='P1'>
        "Selected"
      </p>
      <p class='P1'>
        "Not Selected"
      </p>
      <p class='P2'>
        "Selected"
      </p>
      <p class='P2'>
        "Not Selected"
      </p>
    </div>
  </div>
</div>

score 0 · Answer 5 · answered May 05 '17 at 14:40

this method can't selected .P2 and also first-child , ':first-child' choise his father and then choise 'first-child'. so your .P2:first-child means .P2 his father and his fater's 'first-child' it's P1 but it is not .P2 so unused. you should change to other methods.

CSS: Target the first object of each class

5 Answers5