The Tilde is an Amazing CSS Selector

#1

Post by donteatbark » Thu, May 17, 2012, 1:45 AM UTC

The Tilde is an Amazing CSS Selector
nicholsonws.com

Re: The Tilde is an Amazing CSS Selector

#2

Post by sgdesign » Thu, May 17, 2012, 2:40 AM UTC

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

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

Re: The Tilde is an Amazing CSS Selector

#3

Post by freditup » Thu, May 17, 2012, 3:27 AM UTC

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

Thanks, I was confused too :D

Re: The Tilde is an Amazing CSS Selector

#4

Post by bstar77 » Thu, May 17, 2012, 3:29 AM UTC

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

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.

Re: The Tilde is an Amazing CSS Selector

#5

Post by latch » Thu, May 17, 2012, 3:36 AM UTC

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

Re: The Tilde is an Amazing CSS Selector

#6

Post by sirclueless » Thu, May 17, 2012, 4:05 AM UTC

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

Re: The Tilde is an Amazing CSS Selector

#7

Post by neduma » Thu, May 17, 2012, 4:15 AM UTC

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…