use of ‘~’ in css

[matthewb]

Hi guys,
could anyone know about use of “~” in css. How does it works. Does it support all browsers including ie8?

[JohnMotylJr]

@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!

[TheDoc]

It’s a sibling selector. All the info can be found here: https://css-tricks.com/child-and-sibling-selectors/

[matthewb]

@TheDoc – Does it works as .nextAll() in jquery?

[Kitty Giraudel]

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.

[Author]

Posts