What does :: and ~ do in css?

css pseudo-element css-selectors
monk picture monk · Apr 22, 2012 · Viewed 11.7k times · Source

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

Royi Namir picture Royi Namir · Apr 22, 2012

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/

Related questions

CSS :not(:last-child):after selector

I have a list of elements, which are styled like this: Outputs One | Two | Three | Four | Five | instead of One | Two | Three | Four | Five Anyone know how to CSS select all but the last element? You can see the definition …

Read More
How to write :hover condition for a:before and a:after?

How to write :hover and :visited condition for a:before? I'm trying a:before:hover but it's not working

Read More
:after and :before pseudo-element selectors in Sass

How can I use the :before and :after pseudo-element selectors following the syntax of Sass or, alternatively, SCSS? Like this: p margin: 2em auto > a color: red :before content: "" :after content: "* * *" Of course, the above fails.

Read More