CodePen Home Select first & last element with specific class css

                  /*https://codepen.io/t_afif/pen/ExdgYXo*/

/* first element with class*/
.bird:not(.bird ~ *),
.cat:not(.cat ~ *){
  color: green;
}
/* OR */
:nth-child(1 of .bird),
:nth-child(1 of .cat){
  font-weight:bold;
}
/* last element with class*/
.bird:not(:has(~ .bird)),
.cat:not(:has(~ .cat)){
  color: red;
}
/* OR */
:nth-last-child(1 of .bird),
:nth-last-child(1 of .cat){
    font-style: italic;
}
/**/



.container [class] {
  border:1px solid #000;
  margin: 10px;
  padding: 5px;
  font-size: 20px;
}
.container [class]::after {
  content:attr(class);
}
:is(.bird:not(.bird ~ *),.cat:not(.cat ~ *))::before{
  content: "I am the first "
}
:is(.bird:not(:has(~ .bird)),.cat:not(:has(~ .cat)))::before{
  content: "I am the last "
}