CodePen Home Select first & last element with specific classcss
/*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 "
}