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

21–30 of 31 posts

Re: The Tilde is an Amazing CSS Selector

#22

Post by UntitledNo4 »

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

It comes from Slide Show.

Re: The Tilde is an Amazing CSS Selector

#23

Post by uxp »

charliesome wrote: post #11
recursive wrote: post #10

Earlier quoted context omitted.

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

Re: The Tilde is an Amazing CSS Selector

#24

Post by grk »

alanh wrote: post #18

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…

Thanks for clarifying this.

Re: The Tilde is an Amazing CSS Selector

#25

Post by ars »

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…

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

Re: The Tilde is an Amazing CSS Selector

#28

Post by StavrosK »

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…

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

Re: The Tilde is an Amazing CSS Selector

#29

Post by StavrosK »

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

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.
Post reply on HN