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.
::outsideand::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().