Careful not to misunderstand the syntax. The linked article confusingly has this example:
input:checked ~ #main > #findMe
… described thusly: “With the tilde character on #container input:checked would be able to target #findMe …”
Please note the tilde has nothing to do with #findMe. The tilde only relates the input element and #main, which are in-order siblings. (Adjacent in-order siblings, in fact, so + would have worked just as well as ~ in this example.)
Please also note that ~ does not select siblings; it selects following siblings.
<i>italic</i> <a href="#">link</a> <b>bold</b>
With the above HTML, the following selectors are NOT equivalent:
i ~ b {
/* this will match the bold tag above */
}
b ~ i {
/* this will NOT match any elements in this example */
}
This post abuses IDs. If you have something with the ID #main, it should be unique anyways or else you have invalid markup. If it's unique, why do you need a sibling selector to find it?
But really, the sibling selector is powerful enough that you might not need classes at all. I think the following selector makes a much more powerful statement of the kind of thing you can do now that you couldn't before:
1. total lack of semantic value - you cannot possibly get more meaningless than “span inside a div” there. It makes for extremely brittle CSS.
2. You should be using classes rather than elements in your selectors when possible, not only to make the code more maintainable and flexible, but also because it’s more performant (if you care).
I had no idea what ~ did after reading that post. Should have simply stated that:
"The tilde (~) selector lets you target a sibling element. That is, an element that shares the same parent"
Could then explain how it's different than the + selector.
"This differs from the + selector which will only find an adjacent sibling (immediately following)."
I'd consider comparing it to the child and descendant selector, if I could word it properly. This is what I have which I'm not happy with:
"In some ways, the differences between + and ~ are like the differences between the child selector (>) and the descendant selector (a space), in that #header > a will only a elements directly under #header, while header a will target all a elements under #header, regardless of depth.
It looks like it's just taking the place of having to attach an event to the radio button, doing a lookup on the sibling #find_me element and manipulating it's style via JS.
These types of things are great, the more we move away from JS DOM hacks the better.
Things that show a series of images are called carousels (because they rotate!). And what if your “slider” (carousel) fades instead of transitioning with a horizontal wipe? Not sliding then! Sliders are things you drag and drop to select a value within a range (like a volume slider).
Had not seen carousels called “sliders” until two days ago, but I hate this misnomer more than anything.
Please also note that both Bootstrap and YUI call this pattern a “carousel,” and some of the most popular jQuery plugins do, as well.
I agree with you. Slider already has a meaning in windowing toolkits, carousel is what I've always known this HTML element to be called. No need to confuse things, we might want to implement actual sliders in HTML.
If your "carousel" uses fade transitions, then it is not "rotating".
I don't think there is an accepted universal term. I try to stick to what it is actually doing...if it fades, it's a fader. If it slides it's a slider.
The problem is ambiguity. Overloading, as we programmers say.
Why choose an ambiguous word when a specific one exists?
Keep in mind the point of calling it anything at all is communication, and communication is a lot harder if people don’t hear what you mean.
Call it carousel, and someone either gets it, or asks what a carousel is.
Call it a slider, and half of your audience assumes you meant something else entirely.
(Also, saying a term is not “universal” is pretty much a tautology in the real world, and it is not a valid argument. And a carousel that fades between items is still rotating, just as ads are “in rotation” on the radio even though nothing turns around: yes, rotation is a somewhat ambiguous word, too.)
I wrote up something that actually demonstrates the idea of matching :checked elements to change the state of another element. Think styleable checkboxes!
Please note the tilde has nothing to do with #findMe. The tilde only relates the input element and #main, which are in-order siblings. (Adjacent in-order siblings, in fact, so + would have worked just as well as ~ in this example.)
Please also note that ~ does not select siblings; it selects following siblings.
With the above HTML, the following selectors are NOT equivalent: