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.
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.
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".
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.
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.
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><label></label>
<span><span></span>
<input value="Match (immediately follows a non-label)" />
<label><label></label>
<input value="NO match (immediately follows a label)" />
<span><span></span>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With