Grow your CSS skills. Land your dream job.

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

    And it’s “supported” by IE7.

    # November 20, 2012 at 4:52 am

    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.

*May or may not contain any actual "CSS" or "Tricks".