Is there a way to do a "not adjacent to" selector, opposite of the + operator

Question

In css, can select an element that follows an element using the + operator. For example, I can select only inputs that directly follow labels by doing:

label + input {
    color: red;
}

Is there a way to do the opposite, so like "not adjacent to"? In my example, is there a way to select all inputs that do not directly follow labels?

Edit: It needs to select ALL inputs that don't directly follow labels, including inputs that are in places with no labels whatsoever.

`label + input ~ input {}` uses the general sibling selector to do what you want. Ex: http://jsfiddle.net/nbrwh7ge/ — TylerH, Sep 24 '15 at 16:35
The problem with that is that there has to be an initial label present in order for it to work. — Pete, Sep 24 '15 at 16:38
Yeah, it was based on your original question before you edited it to add the additional requirement. — TylerH, Sep 24 '15 at 16:39

score 11 · Accepted Answer · answered Sep 24 '15 at 16:45

I think it would 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>

Asons · Answer 2 · 2015-09-24T17:02:37.433

9

Like this

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

... well, if you will have an input direct after the body tag you need Oriol's additional selector input:first-child

edited Sep 24 '15 at 17:02

answered Sep 24 '15 at 16:37

Asons

84,923
12
110
165

Is there a way to do a "not adjacent to" selector, opposite of the + operator

2 Answers2

Linked