The Tilde is an Amazing CSS Selector | Hacker News Reader

The Tilde is an Amazing CSS Selector

nicholsonws.com

61 pointsdonteatbark30 comments

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 */
    }

Thanks for clarifying this.

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.

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 { ... }

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

> If it's unique, why do you need a sibling selector to find it?

That selector is not to find it, it's to say #main IS a sibling. If #main exists but is not a sibling then apply different css to it.

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

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

Thanks, I was confused too :D

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.

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.

This is far better then original article. +1

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

"+ will select the immediately following sibling, ~ will select any (one?) subsequent sibling" is plenty clear, I think?

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

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

It's SCSS

The appropriate traditional CSS should be

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

(or)

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

"Powered by Yii Framework + LESS"

It's syntax from LESS/Sass, which allows nested selectors and will generate the appropriate CSS.

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/153/solitary-css3-slider-rotation-tr...

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

http://cssdeck.com/item/364/pure-css3-slideshow-without-page...

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.

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

It comes from Slide Show.

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.

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/

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

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

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

This isn't CSS he is writing.

Reply on news.ycombinator.com