Apply css rule only if next div exists – Just CSS not javascript

Advertisements

Is it possible to apply the CSS rule only if we detect that a div follows the rule?

Example

<div class="div1">...</div>
<div class="div2">..</div>

CSS Example

(if exist div2) .div2 .div1 (aply rule css to div1) {
    background-color: red;
}

>Solution :

You can use the has() pseudo-class in combination with the next sibling
selector
:

.div1:has(+ .div2) {
  background: red;
}
<div class="div1">...</div>
<div class="div2">...</div>

Leave a ReplyCancel reply