Різниця між одинарною та подвійною двокрапкою у CSS

Вступ

Часто помічав, що деякі, частіше початківці веб-розробники завжди використовують одну двокрапку при побудові селекторів. Вони не знають, у чому різниця між однією двокрапкою і двома двокрапками в CSS. Найчастіше ця помилка зустрічається у фрілансерів, які працюють одні і їх просто ніхто не може виправити та вказати на їхню помилку.

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

Псевдокласи

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

article p:first-child { … }

Цей селектор вибирає перший параграф у тезі article.

Псевдоелементи

Селектори із псевдоелементами використовуються для доступу до абстрактних елементів, які не існують у структурі документа. Ці псевдоелемени – це певні частини елементів з документа. Наприклад, перша літера (::first-letter) або перший рядок тексту (::first-line). Також можна вибрати умовні елементи перед (::before) и за (::after) контентом в елементі.

Висновок

Як я вже згадував, фріланс веб розробники часто замість подвійного двокрапки використовують одинарне. Чому так відбувається і чому саме фрілансери? Справа в тому, що браузери легко прощають цю помилку і чудово розуміють селектори з псевдоелементами, навіть якщо використовується одна двокрапка, тому розробник далі залишається невідомим. А якщо це веб розробник фрілансер, то він працює один і ніхто не може йому сказати про помилку.