Select element not preceded by another in CSS

April 24, 2024

Consider this snippet:

.wrapper {
  display: flex;
  gap: 5px;
  border: 1px solid black;
  border-radius: 3px;
  width: 80px;
  padding: 5px;
}

<div class="wrapper">
  <div class="icon">🖼️</div>
  <div class="text">paintings</div>
</div>

The icon may or may not be present.

What I’m trying to achieve is that, if the icon is not present, some left padding is added to .text.

How do I do that? I tried a few combinations of :has, :not and + (the next-sibling combinator), to no avail.

Essentially, I want to select .text, but only if it is not preceded by .icon.

>Solution :

.text:not(.icon + .text) should do the trick

.wrapper {
  display: flex;
  gap: 5px;
  border: 1px solid black;
  border-radius: 3px;
  width: 80px;
  padding: 5px;
}

.text:not(.icon + .text) {
  padding-left: 24px;
}

<div class="wrapper">
  <div class="icon">🖼️</div>
  <div class="text">paintings</div>
</div>

<div class="wrapper">
  <div class="text">paintings</div>
</div>