why special symbol like ~ used in css

Question

I have seen a tutorial about Modal Dialog Box Effect on Codrops site.

I show that they used "~" symbol which is given below

.md-modal 
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    backface-visibility: hidden;
    transform: translateX(-50%) translateY(-50%);
}

.md-show {
    visibility: visible;
}


.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(143,27,15,0.8);
    transition: all 0.3s;
}

Main Problem: Here they used "~" symbol but for what??

.md-show ~ .md-overlay 
{
    opacity: 1;
    visibility: visible;
}

Can anyone help me through this problem. Also i want to use jQuery instead of JavaScript which is provided within the code. Please Help me...

jQuery "instead of" JavaScript? It *is* Javascript, just with a lot of the warts hidden. — duffymo, Feb 19 '14 at 20:12
Read the FAQ! You quoted the code incorrectly. And `~` is a part of the CSS3 [selector syntax](http://www.w3.org/TR/selectors/#general-sibling-combinators). — Pointy, Feb 19 '14 at 20:12
@duffymo: that's why i want to use jQuery it is simple, quick and easy far more than javascript — user3314100, Feb 19 '14 at 20:14
@user3314100 jQuery *is* JavaScript. It's a library, not another language. — Pointy, Feb 19 '14 at 20:16
@Pointy Given how the jQuery team feels the need to rename everything, it may as well be another language. — cimmanon, Feb 19 '14 at 20:23
i know that jQuery is a JavaScript Library. i am just saying that can we make our javascript code shorter using jQuery built in functions or methods — user3314100, Feb 19 '14 at 20:32

score 0 · Answer 1 · answered Feb 19 '14 at 20:12

0

The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn't need immediately succeed the first element, but can appear anywhere after it.

Read the following: http://css-tricks.com/child-and-sibling-selectors/

In addition, this post should not have been tagged with JavaScript. This is a pure CSS question.

answered Feb 19 '14 at 20:12

Joe Johnson

1,814
16
20

Thanks man...i love this article. now i am clear about css tilde concept – user3314100 Feb 19 '14 at 20:16
Please up-vote if you find this answer helpful. – Joe Johnson Feb 19 '14 at 20:27

score 0 · Answer 2 · answered Feb 19 '14 at 20:13

The ~ or tilde is the general sibling selector. It separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

Here is more information on the little squiggly dude...

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

why special symbol like ~ used in css

2 Answers2