在伪元素后面选择第n个元素(在具有相同类名的元素中)和样式

Question

我有5个类名为picked的元素。每个元素都有一个类名为CCD_ 2的div。我为每个CCD_ 4添加了CCD_ 3伪元素，并且需要为每个伪元素设置不同的背景。

如果它可以在pureCSS中完成，那将是最好的，但我找不到任何东西，也许它需要javascript。

.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
background: #000;
margin: 5px;
}

<div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div>

ps。我已经设置了CCD_ 5，使得它们在预览中可见。

tnx提前！

Answer 1

.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
background: #000;
margin: 5px;
}
.picked:nth-of-type(1) .title:after {
background: red;
}
.picked:nth-of-type(2) .title:after {
background: yellow;
}
.picked:nth-of-type(3) .title:after {
background: green;
}
.picked:nth-of-type(4) .title:after {
background: pink;
}
.picked:nth-of-type(5) .title:after {
background: blue;
}

<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>

Answer 2

您看过:nth-of-type(n)吗？

.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
background: #000;
margin: 5px;
}
.picked:nth-of-type(2) .title:after {
background: red;
}

<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>

Answer 3

我已经为第二个孩子提供了一个例子。

.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
background: #000;
margin: 5px;
}
.picked:nth-child(2) .title:after {
background: red;
}

<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>
<div class="picked">
<div class="title"></div>
</div>

Answer 4

.picked {
display: inline-block;
}
.picked .title:after {
content: '';
display: block;
width: 100px;
height: 100px;
margin: 5px;
}
.picked:nth-child(1) .title:after {background: red}
.picked:nth-child(2) .title:after {background: green}
.picked:nth-child(3) .title:after {background: blue}
.picked:nth-child(4) .title:after {background: yellow}
.picked:nth-child(5) .title:after {background: orange}

<div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div><div class="picked"><div class="title"></div></div>