I would like to know what are the differences between these two CSS concepts, in order to understand and point out what is one, and what may be the other.
For example: :hover , ::before .
What I've understood so far is that - :: is pseudo-element and : is pseudo-class, correct?
Pseudo-classes are used to select elements that can not be expressed in other ways than using attributes such as: id 's, classes (or any other type of information available through the DOM). For example: :first-child , :last-child , :lang() and :not() .
table tr:first-child td {
background-color: #ccc;
}
table tr:nth-child(2n) td {
background-color: #fff;
}
:not(table) {
color: #ff0000;
}
Pseudo-elements are "imaginary" elements (or elements virtual ones if you prefer) in which we can apply styles relatively as part of other real elements, but these imaginary elements are not part of the DOM. For example, content fragments, such as ::first-line and ::first-letter or virtually generated content as - ::before and ::after .
p::first-letter {color: green;}
p::before {
content: "Leia isto: ";
}
p::after {
content: url('../imagens/icon.png');
}
The
::sign was entered into the current document in order to differentiate between pseudo-classes and pseudo-elements . The user agents should also accept the two-point sign:for leaf compatibility already existing styles and pseudo-elements introduced in CSS 1 and 2 (ie::first-line,:first-letter,:beforeand:after). This compatibility is not allowed for the new pseudo-elements introduced in the present. source
Sources and references: source , #, pseudo-classes ,