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:
/* pseudo class */
p:is(.main, .second) {}
/* pseudo element */
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.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.