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
, :before
and :after
). This compatibility is not allowed for the new pseudo-elements introduced in the present. source
Sources and references: source , #, pseudo-classes ,
09.10.2015 / 07:57