What does :: and ~ do in css?

Question

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 ?

Answer 1

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/

Answer 2

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); }