What is the use of '~' symbol in CSS?

Question

Can anyone explain what is the use of '~' symbol in CSS?

I have an example where

.myclass label: hover ~ label: before {
    opacity: 0.5;
}

I didn't get the usage of ~ symbol here. Please help me.

score 4 · Answer 1 · answered Sep 08 '15 at 06:56

4

This selector is called General Siblings Selector

See Docs

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

From CSS Specifications:

The following-sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

Example Demo

p ~ span {
  color: red;
}

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>

answered Sep 08 '15 at 06:56

Tushar

85,780
21
159
179

Hi Tushar, will it apply to all the siblings or only one sibling? – Vijay Sep 08 '15 at 06:59
@Vijay It'll be applied to all the matched elements following – Tushar Sep 08 '15 at 07:00
@Vijay Welcome! Kindly accept the answer, if this has helped you – Tushar Sep 08 '15 at 07:09

score 0 · Answer 2 · answered Sep 08 '15 at 06:59

0

I think this will make you clear

element1~element2

p ~ ul  Selects every <ul> element that are preceded by a <p> element

answered Sep 08 '15 at 06:59

Amit singh

2,006
1
13
19

What is the use of '~' symbol in CSS?

2 Answers2