
The Tilde is an Amazing CSS Selector - donteatbark
http://nicholsonws.com/archive/the-tilde-is-an-amazing-css-selector
======
alanh
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 */
        }

~~~
grk
Thanks for clarifying this.

------
ricardobeat
Unfortunately the tilde selector is crippled: it doesn't target _all_
siblings, only the ones _after_ the base selector.

To illustrate:

    
    
        <p>1</p>
        <p class="two">2</p>
        <p>3</p>
       
        .two ~ p { color:red; }
        // only "3" will be red
    

That prevents what would be the most useful cases, like unmarking sibling menu
items, slides and the like.

------
sirclueless
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?

This post could be improved by using classes:

    
    
        #container input:checked ~ .main > .findMe { ... }
    

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:

    
    
        input:checked ~ div span { ... }

~~~
alanh
Two things very wrong with your last suggestion:

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).

------
sgdesign
Can't say I understood what it does from that post, so here's another
description:

<http://reference.sitepoint.com/css/generalsiblingselector>

~~~
latch
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.

~~~
alanh
_“…sibling element. That is, an element that shares the same parent.”_

Unfortunately, that is not true. It only matches _following_ siblings.

See my JSFiddle demo: <http://jsfiddle.net/alanhogan/sSVCG/>

(Also, HTML comments between elements apparently mess up IE7 and IE8.)

------
X-Istence
Am I missing something, but that isn't valid CSS. You can't have selectors
inside of a selector block in CSS...

~~~
recursive
You are definitely right. That isn't CSS. I'm not sure what it is.

~~~
charliesome
It's SCSS

~~~
uxp
The appropriate traditional CSS should be

    
    
        #container #findMe { /* ... */ } 
        #container input:checked ~ #main > #findMe { /* ... */ }
    

(or)

    
    
        #container > #findMe { /* ... */ }
        #container > input:checked ~ #main > #findMe { /* ... */ }

------
luzon19
There already are many CSS3 sliders created using the 'tilde' selector.

<http://cssdeck.com/item/348/pure-css3-content-slider>

[http://cssdeck.com/item/308/awesome-rotating-css-image-
slide...](http://cssdeck.com/item/308/awesome-rotating-css-image-slider)

[http://cssdeck.com/item/153/solitary-css3-slider-rotation-
tr...](http://cssdeck.com/item/153/solitary-css3-slider-rotation-transition)

<http://cssdeck.com/item/363/simply-css-image-slide>

[http://cssdeck.com/item/364/pure-css3-slideshow-without-
page...](http://cssdeck.com/item/364/pure-css3-slideshow-without-page-jump)

~~~
alanh
Oh, that’s what he meant by slider?

Why do some people call these sliders?

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.

~~~
snowwrestler
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.

~~~
alanh
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.)

------
tim_heap
I wrote up something that actually demonstrates the idea of matching :checked
elements to change the state of another element. Think styleable checkboxes!

<http://jsfiddle.net/3CUvm/>

------
StavrosK
Hmm, I wonder if we can simulate a Turing machine in css nowadays...

~~~
evincarofautumn
We can. Rule 110 has been implemented in CSS3[1]. (It can be done without any
HTML, but that’s just silly.)

[1] <http://eli.fox-epste.in/rule110-full.html>

~~~
StavrosK
That's great! Although, how does it work? I can't set any bits...

------
stesch
This isn't CSS he is writing.

