Get a free trial // 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] {

    That will target all elements with the word 'about' in the attribute of title.

    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:

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

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

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed