htmlcsscss-selectors

How to select all but the last-child, unless the last is also the first


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>


Solution

  • If you're able to use :is, you could shorten it to this rule:

    .parent > div:is(:only-child, :not(:last-child))::after