Что делает:: и ~ делать в css?

Я смотрел код, сделанный парнем в twitter, и вот так:

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

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

что это такое?

Ответ 1

Символ тильды (~) является селектором siblings

h2 ~ p { color:red; }

Например,

сделает абзацы красными в приведенном ниже коде

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

:: используется для ::before и ::after псевдоэлементов, которые вместе с content: позволяют помещать, например, значок перед каждой ссылкой

a::before { content:url(link.png); }

Ответ 2

Двойной двоеточие заменяет селектора с одной колонкой для псевдоэлементы в CSS3, чтобы сделать четкое различие между псевдоклассы и псевдоэлементы. Для обратной совместимости синтаксис с одной колонкой допустим для селекторов pre-CSS3. Так после - псевдокласс и:: after - псевдоэлемент.

Общий селектор sibling доступен в CSS3, а комбинатор используемый в этом селекторе, является тильд-символом (~).

Селектор соответствует элементам, которые являются братьями и сестрами данного элемента. Этот пример будет соответствовать элементу p, если его брат из h2 Элемент:

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

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

Ответ 3

:: используется для псевдоэлементов в CSS3.

~ является общим сочетанием сиблинга в CSS3, он используется для выбора элементов, которые следуют за другим элементом на том же уровне.