25

I was looking at a code made by a guy in twitter and it is like this :

div::after {
-webkit-transform: rotate(2deg);
}

div ~ div {
-webkit-transform: rotate(0deg);
}

what is it ?

Salman A
  • 262,204
  • 82
  • 430
  • 521
monk
  • 4,727
  • 13
  • 45
  • 67
  • 4
    Here you go: http://www.w3.org/TR/selectors/ `::` is a pseudo-element, while `div ~ div` is a div that comes after a div. – Mr Lister Apr 22 '12 at 11:44
  • Related: http://stackoverflow.com/questions/10782054/what-does-the-css-tilde-squiggle-twiddle-selector-do and http://stackoverflow.com/questions/16704049/what-does-the-double-colon-mean-in-css – Salman A Feb 11 '15 at 07:16

3 Answers3

24

The double colon replaced the single-colon selectors for pseudo-elements in CSS3 to make an explicit distinction between pseudo-classes and pseudo-elements. For backward compatibility, the single-colon syntax is acceptable for pre-CSS3 selectors. So, :after is a pseudo-class and ::after is a pseudo-element.

The general sibling selector is available in CSS3, and the combinator used in this selector is a tilde character (~).

The selector matches elements that are siblings of a given element. This example will match a p element if it’s a sibling of an h2 element:

http://reference.sitepoint.com/css/generalsiblingselector

http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/

Royi Namir
  • 144,742
  • 138
  • 468
  • 792
  • 1
    Evotech has got it wrong. `:after` with a single colon is not a pseudo class, it always has been a pseudo-element, even though you can use the pseudo-class syntax. – Mr Lister Apr 22 '12 at 13:34
  • 1
    Yes ::after and :after are the same thing, both pseudo-elements, as the spec says here http://www.w3.org/TR/selectors/#pseudo-elements – Panos Theof Jan 29 '14 at 12:21
22

The tilde character (~) is the siblings selector

h2 ~ p { color:red; }

for example would make the paragraphs red in the below code

<h2>Heading</h2>
<p>The selector above matches this paragraph.</p>
<p>The selector above matches this paragraph.</p>

the :: is used for ::before and ::after pseudo-elements which together with the content: allow you to put, for example, an icon before every link

a::before { content:url(link.png); }
Love Dager
  • 2,251
  • 2
  • 18
  • 16
  • 10
    `~` doesn't exactly match siblings - only siblings preceded by an element of the first type. A `

    ` before the `

    ` in your example wont match.

     – JNF Jul 21 '13 at 07:20
9

The :: is used for pseudo elements in CSS3.

The ~ is the general sibling combinator in CSS3, it is used to select elements that follow another element at the same level.

Olaf Dietsche
  • 72,253
  • 8
  • 102
  • 198
Guffa
  • 687,336
  • 108
  • 737
  • 1,005