Html 如何在父元素中选择同一类的第一个子级和最后一个子级？

我想在每个div中选择类为“x”的第一个和最后一个元素

当我使用下面的CSS代码时，只选择第一个容器中的最后一个元素和最后一个容器中的第一个元素。如何在父元素中选择同一类的第一个和最后一个元素

div>.x:第一个孩子{
背景：绿色；
}
div>.x：最后一个孩子{
背景：蓝色；
}

123


123


123


123


123


123

我假设，与您发布的HTML中不同的是，您将有带有x类的段落，而这些段落不是第一个或最后一个？您可以为第一个找到解决方法，但我不认为是最后一个。

：第一个子项

选择与选择器匹配的元素，并且也是其父项中的第一个子项。同样，对于

：最后一个孩子

。