The difference between : vs :: in CSS, or pseudo-classes vs pseudo-elements

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!

Is there a difference between writing something such as p:suff_here vs writing something like p::suff_here?

The answer is yes. In the first case the single colon : refers to a CSS pseudo-class, while double colon :: refers to a pseudo-element.

Then what is the difference between CSS pseudo classes and CSS pseudo elements? Well:

  • the pseudo-classes are referring to a specific SITUATION in which the targeted element can be. Something must happen so that the pseudo-class becomes active. For example: hovering an element with the mouse, the element has a given class or a link was visited.
  • while the pseudo-elements refer to a specific artificial PART of the targeted element. For example the first line or letter in a paragraph, or the selected text. In a given selector rule, you can have just one pseudo-element.

Note that we also have functional pseudo-classes or some pseudo-elements that will take a list of arguments as parameters:

p:is(.main, .second) {}
p::part(table) {}

Can I use : instead of :: ?

Given that the distinction between pseudo-classes and pseudo-elements was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.

This means that for some pseudo-elements, both the el:my_pseudo_element and el::my_pseudo_element will work.

However, the general rule is to use : for pseudo-classes and :: for pseudo-elements.

What about the specificity of pseudo-elements vs pseudo-classes?

Most of the pseudo-elements and pseudo-classes have an equal specificity of 10 points. The same as a normal class selector.

But there are exceptions to this rule. For example, the functional pseudo-class is() takes the highest specificity from the given selector list, while where() has a specificity of zero.

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

Neural Networks for JavaScript developers
Presale - 15$ free coupon

Hi friend! Before you go, just wanted to let you know that in March 2023 I will be launching the TensorFlow.Js by Example course.

This course will include basic concepts of AI and Neural Networks done with TensorFlowJs such as:

  • Working with datasets
  • Visualizing training
  • Deep Neural Networks in JavaScript
  • Reinforcement Learning
  • Convolutional neural networks
  • and much more ...

Also, there will be a lot of examples as:

  • Object detection
  • Natural language processing
  • Face and voice recognition
  • Gaming AI

Join now the waiting list and get a 15$ coupon off the launching price!

X