Forums

Get help. Give help. A Web Design and Development Community.

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.

We have a pretty good* newsletter.