Hi guys, could anyone know about use of "~" in css. How does it works. Does it support all browsers including ie8?
@matthewb : It's used in specifying a certain word within the attribute,
[title~=about] { background:#333; }
That will target all elements with the word 'about' in the attribute of title.
http://jsfiddle.net/john_motyl/JjrF4/
What TheDoc said works best for what you want to know!
It's a sibling selector. All the info can be found here: http://css-tricks.com/child-and-sibling-selectors/
@TheDoc - Does it works as .nextAll() in jquery?
Yeah, it's pretty much the same thing.
.my-element ~ p
This selector targets every p element after .my-element as long as they share the same direct parent.
And it's "supported" by IE7.
With all of that being said, if you are writing good CSS, and making full use of classes, you shouldn't really need to use it all that often.
Hi guys, could anyone know about use of "~" in css. How does it works. Does it support all browsers including ie8?
@matthewb : It's used in specifying a certain word within the attribute,
That will target all elements with the word 'about' in the attribute of title.
http://jsfiddle.net/john_motyl/JjrF4/
What TheDoc said works best for what you want to know!
It's a sibling selector. All the info can be found here: http://css-tricks.com/child-and-sibling-selectors/
@TheDoc - Does it works as .nextAll() in jquery?
Yeah, it's pretty much the same thing.
This selector targets every p element after .my-element as long as they share the same direct parent.
And it's "supported" by IE7.
With all of that being said, if you are writing good CSS, and making full use of classes, you shouldn't really need to use it all that often.