Not that two lines versus one is an issue; but I'd like to learn if there is a more concise way of selecting all but the last-child unless the last-child is also the first-child or only-child, in which case it should be selected. Thus, in the example, the blue square should be present in the lower parent to the right of its only child node; but that won't work without the :only-child
line.
I tried using a range in nth-child
and nth-last-child
but could not get it to work.
I don't know the number of child nodes that will be in the parent, only that there is at least one.
.parent {
margin: 10px;
padding: 5px;
border: 1px solid black;
width: 70px;
}
.parent > div {
position: relative;
}
.parent > div:only-child::after,
.parent > div:not(:last-child)::after {
content: "";
display: block;
position: absolute;
right: 0px;
top: 7px;
width: 7px;
height: 7px;
margin-left: 5px;
background-color: blue;
}
<div class="parent">
<div>one</div>
<div>two</div>
<div>three</div>
</div>
<div class="parent">
<div>one</div>
</div>
If you're able to use :is
, you could shorten it to this rule:
.parent > div:is(:only-child, :not(:last-child))::after