2

How to select the first child from all similar class in css

HTML

<div class="parent">
    <div class="no-a-child"><span>1</span></div>
    <div class="child"><span>2</span></div>
    <div class="child"><span>3</span></div>
    <div class="child"><span>4</span></div>
</div>

CSS 

.parent .child:nth-child(1) span {
  color:red;
}


.parent .child:nth-child(1) span {
  color: red;
}
<div class="parent">
  <div class="no-a-child"><span>1</span></div>
  <div class="child"><span>2</span></div>
  <div class="child"><span>3</span></div>
  <div class="child"><span>4</span></div>
</div>

Here I want a red color:

<div class="child"><span>2</span></div>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
Par Tha
  • 1,265
  • 7
  • 10
  • According to [w3schools](https://www.w3schools.com/cssref/sel_nth-child.asp) nth-child works as an example: "Specify a background color for every

    element that is the second child of its parent:" using the code `p:nth-child(2) {background: red;}` So, you should use `nth-child(2)`

     – theusaf Oct 11 '19 at 14:50
  • @RicardoGonzalez I believe the question specifically states CSS here. – Mark Schultheiss Oct 11 '19 at 21:32

4 Answers4

2

One approach to achieve this effect requires two stages:

  1. Declare a style for a given class
  2. Undo that style for all elements of that class which follow the first element of that class

Working Example:

/* Declare a style for a given class */

.child {
  color: rgb(255, 0, 0);
}

/* Undo that style for all elements of that class which follow the first */

.child ~ .child {
  color: inherit;
}
<div class="parent">
    <div class="no-a-child"><span>1</span></div>
    <div class="child"><span>2</span></div>
    <div class="child"><span>3</span></div>
    <div class="child"><span>4</span></div>
</div>
Rounin
  • 27,134
  • 9
  • 83
  • 108
0

I'm not sure if I understood well, but i guess you want just the first class child to be in red, and not the class no-a-child...if so, just use this 

.parent :nth-of-type(2) span{
  color: red;
}
  <div class="parent">
      <div class="no-a-child"><span>1</span></div>
      <div class="child"><span>2</span></div>
      <div class="child"><span>3</span></div>
      <div class="child"><span>4</span></div>
  </div>
alesssz
  • 384
  • 4
  • 18
  • It's not necessarily `:nth-of-type(2)` … it's the first child that _**is**_ a `class="child"` which could be the 1st, 5th, 12th, etc. You wouldn't know which number to put in the nth-of-type – Stephen P Oct 11 '19 at 21:42
0

If you want the first div that has class child you could try something like:

div.child:nth-of-type(1).

Peter K.
  • 36
  • 4
0

Use a adjacent sibling combinator https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator to target the next element after the no-a-child class element as that seems to be what you really desire.

I added another example (cyan color) that illustrates that option

.parent > .no-a-child+.child>span {
  color: #FF0000;
}

.parent-second> div:first-of-type + div>span {
  color: #00FFFF;
}
<div class="parent">
  <div class="no-a-child"><span>1</span></div>
  <div class="child"><span>2</span></div>
  <div class="child"><span>3</span></div>
  <div class="child"><span>4</span></div>
</div>

<div class="parent-second">
  <div class="no-a-child"><span>1</span></div>
  <div class="child"><span>2</span></div>
  <div class="child"><span>3</span></div>
  <div class="child"><span>4</span></div>
</div>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
  • I interspersed other divs for a more generalized problem: select the first with class "child" regardless of other divs/classes. I added entries at `0`, `1.5`, and `3.5` all with class "other". With that, `parent-second` still works while `parent` doesn't. – Stephen P Oct 11 '19 at 22:53