4 ms·

Nice, I've been doing CSS for years but never knew about the "+" or "~" selectors until now. Anyone have any examples of how they have or would use these in re

by yeldarb 13y ago

Nice, I've been doing CSS for years but never knew about the "+" or "~" selectors until now. Anyone have any examples of how they have or would use these in real-life?

harlanlewis 13y ago
The adjacent sibling selector `+` can be used to style an element based on the state of a sibling. For example: input:valid + label { color: black; } input:invalid + label {color: red; } CSS Tricks has a tutorial (http://css-tricks.com/float-labels-css/ http://css-tricks.com/float-labels-css/) on this technique for displaying form labels as faux placeholders until the input has content, although it's not quite ready for most site's production requirements. I haven't found many uses for the general sibling selector `~`, as it matches all elements after the initial selected element. I usually want the preceding elements as well if I'm shooting that broadly, so simply excluding the item with `:not()` is generally a better choice.
aram 13y ago
Way back NetTuts had a good article with unusual CSS selectors; check it out here: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 https://code.tutsplus.com/tutorials/the-30-css-selectors-you...
stan_rogers 13y ago
Before the nth-child/first-child selectors had common-enough implementation and the <section> tag didn't yet exist, I used hn + p and .epigraph + p (along with first-line set in small-caps and first-letter as an versal) to style the initial paragraph of a page or major section. That's more document layout than anything apptastic, but it made for a nice-looking page.
criswell 13y ago
A super useful one is for styling an element that's next to a checked checkbox. :checked + label { background-color: green; } http://jsbin.com/witaziwu/1/edit?html,css,output http://jsbin.com/witaziwu/1/edit?html,css,output Small demo if you want to mess around with it.

by yeldarb 13y ago

Nice, I've been doing CSS for years but never knew about the "+" or "~" selectors until now. Anyone have any examples of how they have or would use these in real-life?

harlanlewis 13y ago

The adjacent sibling selector `+` can be used to style an element based on the state of a sibling. For example: input:valid + label { color: black; } input:invalid + label {color: red; } CSS Tricks has a tutorial (http://css-tricks.com/float-labels-css/ http://css-tricks.com/float-labels-css/) on this technique for displaying form labels as faux placeholders until the input has content, although it's not quite ready for most site's production requirements. I haven't found many uses for the general sibling selector `~`, as it matches all elements after the initial selected element. I usually want the preceding elements as well if I'm shooting that broadly, so simply excluding the item with `:not()` is generally a better choice.

aram 13y ago

Way back NetTuts had a good article with unusual CSS selectors; check it out here: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 https://code.tutsplus.com/tutorials/the-30-css-selectors-you...

stan_rogers 13y ago

Before the nth-child/first-child selectors had common-enough implementation and the <section> tag didn't yet exist, I used hn + p and .epigraph + p (along with first-line set in small-caps and first-letter as an versal) to style the initial paragraph of a page or major section. That's more document layout than anything apptastic, but it made for a nice-looking page.

criswell 13y ago

A super useful one is for styling an element that's next to a checked checkbox. :checked + label { background-color: green; } http://jsbin.com/witaziwu/1/edit?html,css,output http://jsbin.com/witaziwu/1/edit?html,css,output Small demo if you want to mess around with it.