Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 423
Pete Avatar asked Sep 24 '15 16:09

Pete


People also ask

Can Universal selectors be used in combination with other selectors?

Universal CSS Selector The three lines of code inside the curly braces ( color , font-size , and line-height ) will apply to all elements on the HTML page. As seen here, the universal selector is declared using an asterisk. You can also use the universal selector in combination with other selectors.

How do I target a sibling in CSS?

Adjacent Sibling Selector (+) The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".

Can we combine two selectors?

The descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector.

How do I select a specific Nth child in CSS?

Definition and Usage. The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.


1 Answers

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>
like image 200
Oriol Avatar answered May 25 '23 13:05

Oriol