if single div, css apply on it if more than one, css apply on last one-CodePudding

Can we do something with single CSS property either from nth-child or last-child or anything else?

if only single child element, the color of that child should be red .child {color: red;}

<div class="container">
  <div class="child">Hello</div>
</div>

and if more than one child element, the color of the last child should be red .child {color: red;}

<div class="container">
  <div class="child">Hello</div>
  <div class="child">Hello</div>
  <div class="child">Hello</div>
</div>

P.S. - if single record is coming from API, then that single record should be in red color and if there are 3-4 records from API, then last records should be in red color.

Edited ---------------------

Thanks this is working for me one more question, what if we put css for pseudo element. Like:

.container .child:before :last-child { content: "-"; }

I got the solution -

.container :last-child:before { content: "-"; }

CodePudding user response：

You can use the last-child property for that.

.container :last-child {
  color: red;
}