Pseudo-elements represent generated content rendered alongside elements. While pseudo-elements are not part of the document tree, they still inherit properties from the parent.
Similar to ::before
and ::after
, ::outside
targets a pseudo-element wrapping an element.
/* styles paragraphs with a red border and an outer blue border, which is very ugly */
p {
border: 1em solid red;
}
p::outside {
border: 1em solid blue;
}
Appending a numeric argument (n
) with a value greater than 1 to ::before
, ::after
, or ::outside
allows you to attach multiple, sibling pseudo-elements to an element, where p::before(1)
is synonymous with p::before
.
/* turns any respectable essay into the accusations of a raving lunatic */
p::after {
content: "?";
}
p::after(2) {
content: "!";
}
::before(n), ::after(n), ::outside, and ::outside(n) have all been part of the CSS3 working draft since 2003.
Pseudo-classes are special ways of targeting the state of an element. For example, the p:hover
selector targets paragraphs only when they are being hovered over by a pointer.
:contains
targets elements containing other selector strings (s
), meaning that ul:contains(li)
targets unorganized lists which contain list items. :excludes
works just the opposite, meaning that ul:excludes(li)
targets unorganized lists which do not contain list items.
:contains
was in the CSS3 proposed recommendation and candidate recommendation for many years, and mysteriously disappeared. However, it only targetted text content, not other selectors. If :contains
does return to spec, it might return as :has
. What would :excludes
be then? :hasnt
?
:media
targets elements matching the conditions of particular media features (f
), similar to the @media
rule, meaning that ul:media(max-width: 640px)
targets unorganized lists which happen to be 640px or less in width. While the @media
rule evaluates the document, the :media
pseudo-class evaluates the element.
Nothing like :media
exists in any draft, but I did write down my thoughts on the matter.
Normally, the target of a selector is represented by the last compound, meaning that the ul li
selector targets any list items descended from unorganized lists.
Prepending the dollar ($
) symbol to a compound respecifies the target, meaning that the $ul li
selector targets any unorganized lists which happen to contain list items.
$
was in the working draft, but has since changed into a !
, and is now slated for removal.
::outside
and::before(n)
/after(n)
seem pretty cool.Nesting these pseudo-elements would be pretty cool as well, but that’s a whole different thing.
:contains()
and$
seem to be coming back as:matches()
, and I really dislike:media()
.