Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The Tilde is an Amazing CSS Selector

nicholsonws.com

Post reply on HN
Print view View original

11–20 of 31 posts

Re: The Tilde is an Amazing CSS Selector

#14

Post by ricardobeat »

Unfortunately the tilde selector is crippled: it doesn't target all siblings, only the ones after the base selector.

To illustrate:

    
1

    2

    
3

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

Re: The Tilde is an Amazing CSS Selector

#15

Post by alanh »

latch wrote: post #5
sgdesign wrote: post #2

Can't say I understood what it does from that post, so here's another description: http://reference.sitepoint.com/css/generalsiblingselector

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 c…

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

Re: The Tilde is an Amazing CSS Selector

#16

Post by alanh »

sirclueless wrote: post #6

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…

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

Re: The Tilde is an Amazing CSS Selector

#17

Post by alanh »

luzon19 wrote: post #9

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.

Re: The Tilde is an Amazing CSS Selector

#18

Post by 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.

    italic link bold
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 */
    }

Re: The Tilde is an Amazing CSS Selector

#19

Post by snowwrestler »

alanh wrote: post #17
luzon19 wrote: post #9

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,…

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.

Re: The Tilde is an Amazing CSS Selector

#20

Post by alanh »

snowwrestler wrote: post #19
alanh wrote: post #17

Earlier quoted context omitted.

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,…

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

Post reply on HN