All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

use of ‘~’ in css

  • # November 20, 2012 at 1:43 am

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

    # November 20, 2012 at 1:49 am

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

    # November 20, 2012 at 1:49 am

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

    # November 20, 2012 at 1:56 am

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

    # November 20, 2012 at 2:57 am

    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.

    # November 20, 2012 at 3:59 am

    This reply has been reported for inappropriate content.

    And it’s “supported” by IE7.

    # November 20, 2012 at 4:52 am

    This reply has been reported for inappropriate content.

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed