Style not changing for child of first class

Question

I want to change the style of the first element with class new. I've tried all nth-child/type methods but it doesn't seem to work.

* {
  margin: 0;
  box-sizing: border-box;
  font-size: 1.2rem;
}

.new {
  position: relative;
}

.new::before {
  content: "";
  position: absolute;
  display: block;
  left: -2rem;
  width: 100%;
  height: 100%;
  background-color: gold;
  z-index: -1;
}

.new::after {
  content: "NEW";
  color: green;
  position: absolute;
  font-weight: bold;
  font-size: 0.5em;
  display: inline-block;
  margin-left: 1em;
}

.new:nth-of-type(1) {
  background-color: blue;
}

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li class="new">item 3</li>
  <li class="new">item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ol>

I don't want to use JS.

Just modify the styles related to the first list element with new class. nothing specific as of now. — Servesh Chaturvedi, Sep 20 '21 at 04:29
I've updated my answer to apply your `background-color` styling, and added more instances of your `new` class to illustrate how it works on any number of elements — dave, Sep 20 '21 at 05:59

dave · Accepted Answer · 2021-09-23T11:01:53.210

You can apply styling to all instances of the new class, then override all other instances using the CSS general sibling combinator: ~

ol li.new { background-color: blue;}
ol li.new ~ li.new { background-color: gold;}

This approach works with any number of elements that have the new class.

* {
  margin:0;
  box-sizing: border-box;
  font-size: 1.2rem;
}

.new {
  position: relative;
  background-color: gold;
}

.new::before {
  content: "";
  position: absolute;
  display: block;
  left: -2rem;
  width: 100%;
  height: 100%;
  
  z-index: -1;
}

.new::after {
  content: "NEW";
  color: green;
  position: absolute;
  font-weight: bold;
  font-size: 0.5em;
  display: inline-block;
  margin-left: 1em;
}
/*
.new:nth-of-type(1) {
  background-color: blue;
}
*/

ol li.new { background-color: blue;}
ol li.new ~ li.new { background-color: gold;}

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li class="new">item 3</li>
  <li class="new">item 4</li>
  <li class="new">item 5</li>
  <li class="new">item 6</li>
  <li>item 7</li>
  <li>item 8</li>
</ol>

score 0 · Answer 2 · answered Sep 20 '21 at 05:42

For minimal changes, you can change nth-of-type(1) to nth-of-type(2n+1).

* {
  margin:0;
  box-sizing: border-box;
  font-size: 1.2rem;
}

.new {
  position: relative;
}

.new::before {
  content: "";
  position: absolute;
  display: block;
  left: -2rem;
  width: 100%;
  height: 100%;
  background-color: gold;
  z-index: -1;
}

.new::after {
  content: "NEW";
  color: green;
  position: absolute;
  font-weight: bold;
  font-size: 0.5em;
  display: inline-block;
  margin-left: 1em;
}
.new:nth-of-type(2n+1) {
  background-color: blue;
}

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li class="new">item 3</li>
  <li class="new">item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ol>

But since the gold background color is caused by the pseudo element ::before, you may want to override that instead. Try to run the snippet below:

* {
  margin:0;
  box-sizing: border-box;
  font-size: 1.2rem;
}

.new {
  position: relative;
}

.new::before {
  content: "";
  position: absolute;
  display: block;
  left: -2rem;
  width: 100%;
  height: 100%;
  background-color: gold;
  z-index: -1;
}

.new::after {
  content: "NEW";
  color: green;
  position: absolute;
  font-weight: bold;
  font-size: 0.5em;
  display: inline-block;
  margin-left: 1em;
}
.new:nth-of-type(2n+1)::before {
  background-color: blue;
}

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li class="new">item 3</li>
  <li class="new">item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ol>

Thank you for your time to answer. I have already tried that and got the result. But it will break if I have more elements with new class. I'd like something like nth child 1 or nthoftype 1 — Servesh Chaturvedi, Sep 20 '21 at 05:51
agreed. but `:nth-of-type` doesn't work this way. Either you have to change the HTML structure or you have to use JS; @dave's answer looks fine too. — Raptor, Sep 20 '21 at 06:01
yeah, but I found one answer on SO which used it like that and it worked. That's why I tried it. Thank u — Servesh Chaturvedi, Sep 20 '21 at 06:03

score 0 · Answer 3 · answered Sep 20 '21 at 06:07

Little bit change nth-of-type(1) to nth-of-type(2n+1).

 /* Style */

* {
  margin:0;
  box-sizing: border-box;
  font-size: 1.2rem;
}

.new {
  position: relative;
}

.new::before {
  content: "";
  position: absolute;
  display: block;
  left: -2rem;
  width: 100%;
  height: 100%;
  background-color: gold;
  z-index: -1;
}

.new::after {
  content: "NEW";
  color: green;
  position: absolute;
  font-weight: bold;
  font-size: 0.5em;
  display: inline-block;
  margin-left: 1em;
}
.new:nth-of-type(2n+1)::before {
  background-color: blue;
}

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li class="new">item 3</li>
  <li class="new">item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ol>

Thank you. Raptor also approached it the same way. But I required no new elements to be affected. — Servesh Chaturvedi, Sep 20 '21 at 06:11

Style not changing for child of first class

3 Answers3