Is there a way to make the selector β€œnot next to” the opposite of the + operator

In css, you can select the element that follows the element using the operator +. For example, I can select only those inputs that immediately follow the labels, doing:

label + input {
    color: red;
}

Is there a way to do the opposite, since "does not adjoin"? In my example, is there a way to select all inputs that do not directly follow labels?

Edit: He should select ALL inputs that do not directly follow labels, including inputs that are in places without labels.

+4
source share
2 answers

I think it will be

input:first-child, :not(label) + input {
  color: red;
}

input {
  background: red;
}
input:first-child, :not(label) + input {
  background: #0f0;
}
body > * {
  display: block;
  width: 100%;
}
<input value="Match (first child)" />
<label>&lt;label&gt;</label>
<span>&lt;span&gt;</span>
<input value="Match (immediately follows a non-label)" />
<label>&lt;label&gt;</label>
<input value="NO match (immediately follows a label)" />
<span>&lt;span&gt;</span>
Run codeHide result
+4
source

Like this

:not(label) + input {
    color: red;
}

... , body, Oriol input:first-child

+6

Source: https://habr.com/ru/post/1608849/


All Articles