Разница между одинарным и двойным двоеточием в CSS

Введение

Часто замечал, что некоторые, чаще, начинающие веб разработчики всегда используют одно двоеточие при построении селекторов. Они не знают, в чем разница между одним двоеточием и двумя двоеточиями в CSS. Чаще всего эта ошибка встречается у фрилансеров, которые работают одни и их просто никто не может поправить и указать на их ошибку.

Так в чем же разница? А отличие очень простое, одно двоеточие используется для псевдоклассов, два или двойное двоеточия – для псевдоэлементов.

Псевдоклассы

Селекторы с псевдоклассами используются для доступа к определенным состояниям существующих элементов в структуре документа. Пример, такого CSS селектора:

article p:first-child { … }

Этот селектор выбирает первый параграф в тэге article.

Псевдоэлементы

Селекторы с псевдоэлементами используются для доступа к абстрактным элементам, которые не существуют в структуре документа. Эти псевдоэлемены это определенные части элементов из документа. Например, первая буква (::first-letter) или первая строка текста (::first-line). Также можно выбрать условные элементы перед (::before) и за (::after) контентом в элементе.

Заключение

Как я уже упоминал, фриланс веб разработчики часто вместо двойного двоеточия используют одинарное. Почему так происходит и почему именно фрилансеры? Дело в том, что браузеры легко прощают эту оплошность и прекрасно понимают селекторы с псевдоэлементами, даже если используется одно двоеточие, поэтому разработчик дальше остается в неведении. А если при этом это веб разработчик фрилансер, то он работает один и никто не может ему сказать об ошибке.