Shortname: css-pseudo Level: 4 Status: ED Group: csswg ED: http://dev.w3.org/csswg/css-pseudo-4/ TR: http://www.w3.org/TR/css-pseudo-4/ Editor: Daniel Glazman, Disruptive Innovations Editor: fantasai, Invited Expert, http://fantasai.inkedblade.net/contact Editor: Alan Stearns, Adobe Systems Inc., stearns@adobe.com Abstract: This CSS module defines pseudo-elements, abstract elements that represent portions of the CSS render tree that can be selected and styled. Ignored Terms: typographic letter unit, Unicode general category, initial-letter
p element to uppercase”:
p::first-line { text-transform: uppercase }
The selector ''p::first-line''
does not match any real document element.
It does match a pseudo-element that conforming user agents
will insert at the beginning of every p element.
<P>This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>
The lines might be broken as follows:
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag
sequence. The other lines will be treated as
ordinary lines in the paragraph.
This paragraph might be “rewritten” by user agents
to include a fictional tag sequence to represent ''::first-line''.
This fictional tag sequence helps to show how properties are inherited.
<P><P::first-line> This is a somewhat long HTML
paragraph that </P::first-line> will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>
span
element encompassing the first sentence:
<P><SPAN class="test"> This is a somewhat long HTML
paragraph that will be broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>
the user agent could simulate start and end tags for span
when inserting the fictional tag sequence for ''::first-line''
to get the correct inheritance behavior.
<P><P::first-line><SPAN class="test"> This is a somewhat long HTML
paragraph that will </SPAN></P::first-line><SPAN class="test"> be broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>
DIV in <DIV><P>This line...</P></DIV>
is the first line of the P
(assuming that both P and DIV are blocks).
<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>
the first formatted line of the DIV is not the line "Hello".
Note: Note that the first line of the p in this fragment:
<p><br>First...
doesn't contain any letters (assuming the default style for br).
The word "First" is not on the first formatted line.
A user agent must act as if the fictional start tags of a ''::first-line'' pseudo-element
were nested just inside the innermost enclosing block-level element.
<DIV>
<P>First paragraph</P>
<P>Second paragraph</P>
</DIV>
is
<DIV>
<P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P>
<P><P::first-line>Second paragraph</P::first-line></P>
</DIV>
h2 + p::first-letter { initial-letter: 2; }
P*) Unicode general category [[!UAX44]])
that precedes or follows the first typographic letter unit must also be included
in the ''::first-letter'' pseudo-element.
T" in <p>'<em>T...,
the user agent may create a ''::first-letter'' pseudo-element
from one of the elements, both elements, or simply not create a pseudo-element.
Additionally, if the first letter(s) of the block
are not at the start of the line (for example due to bidirectional reordering),
then the user agent need not create the pseudo-element(s).
The ''::first-letter'' pseudo-element is contained within any ''::first-line''
pseudo-elements, and thus inherits from ''::first-line''.
<p><br>First...
the first line doesn't contain any letters
and ''::first-letter'' doesn't match anything.
In particular, it does not match the “F” of “First”.
In CSS, the ''::first-letter'' pseudo-element
only applies to block containers.
A future version of this specification
may allow this pseudo-element to apply to more display types.
The ''::first-letter'' pseudo-element can be used
with all such elements that contain text,
or that have a descendant in the same flow that contains text.
A user agent should act as if the fictional start tag
of the ::first-letter pseudo-element
is just before the first text of the element,
even if that first text is in a descendant.
<div>
<p>The first text.
is:
<div>
<p><div::first-letter><p::first-letter>T</...></...>he first text.
<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>
the first letter of the DIV is not the letter "H".
In fact, the DIV doesn't have a first letter.
If an element is a list item (''display: list-item''),
the ''::first-letter'' applies
to the first letter in the principal box after the marker.
User-Agents may ignore ''::first-letter''
on list items with ''list-style-position: inside''.
If an element has ''::before'' or ''::after'' content,
the ''::first-letter'' applies to the first letter of the
element including that content.
p { line-height: 1.1 }
p::first-letter { font-size: 3em; font-weight: normal }
span { font-weight: bold }
...
<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>
Erbarremt over my en mijn benaeuwde vesten<br>
En arme burgery, en op mijn volcx gebed<br>
En dagelix geschrey de bange stad ontzet.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Drop cap initial letter</TITLE>
<STYLE type="text/css">
P { font-size: 12pt; line-height: 1.2 }
P::first-letter { font-size: 200%; font-weight: bold; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article
in The Economist.</P>
</BODY>
</HTML>
This example might be formatted as follows:
<P>
<SPAN>
<P::first-letter>
T
</P::first-letter>he first
</SPAN>
few words of an article in the Economist.
</P>
Note that the ''::first-letter'' pseudo-element tags abut the
content (i.e., the initial character), while the ::first-line
pseudo-element start tag is inserted right after the start tag of the
block element.
The root highlight is a multi-piece overlay over the entire tree, portions of which are selected and correspond to the ''::selection'' pseudo-element. Each box owns the piece of of the overlay corresponding to any text or replaced content directly contained by the box. For text, the corresponding overlay must cover at least the entire em box and may extend further above/below the em box to the line box edges. Spacing between two characters may also be part of the overlay, in which case it belongs to the innermost element that contains both characters and is selected when both characters are selected For replaced content, the associated overlay must cover at least the entire replaced object, and may extend outward to include the element's entire content box. The overlay may also include other other areas within the border-box of an element; in this case, those areas belong to the innermost such element that contains the area. Issue: See F2F minutes, dbaron's message, Daniel's thread, Gecko notes, Opera notes, Webkit notes Each element draws its own portion of the highlighted overlay, which receives the styles specified by the ''::selection'' pseudo-element styles for which it or one of its ancestors is the originating element. When multiple styles conflict, the winning style is the one belonging to the innermost element after cascading. Issue: This could alternately be described in terms of inheritance. So, how do we want ''inherit'' to behave here? Should it inherit from the parent ''::selection'' or the originating element? Opera does the former, Gecko/Blink the latter.
Authors wanting multiple selections styles should use '':root::selection'' for their document-wide selection style, since this will allow clean overriding in descendants. (''::selection'' alone would apply to every element in the tree, overriding the more specific styles of any ancestors.)
<p> element
whose class attribute has the value note:
p.note::before { content: "Note: " }
Since the initial value of 'display' is ''inline'',
this will generate an inline box.
Like other inline children of <p>,
it will participate in <p>’s inline formatting context,
potentially sharing a line with other content.
For compatibility with existing style sheets written against CSS Level 2 [[CSS21]],
user agents must also accept the previous one-colon notation
(:before and :after)
for these pseudo-elements.
Name: alt Value: none | <> Initial: none Applies to: ::before and ::after pseudo-elements Inherited: no Computed Value: as specified
.new::before {
content: url(./img/star.png);
alt: "New!";
}
.expandable::before {
content: "\25BA"; /* a.k.a. ► */
alt: "";
/* aria-expanded="false" already in DOM,
so this pseudo-element is decorative */
}
p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }
<P>Some text that ends up on two lines</P>
The first letter of each P element will be green with a font size of ’24pt'.
The rest of the first formatted line will be blue
while the rest of the paragraph will be red.
Assuming that a line break will occur before the word "ends",
the fictional tag sequence for this fragment might be:
<P>
<P::first-line>
<P::first-letter>
S
</P::first-letter>ome text that
</P::first-line>
ends up on two lines
</P>
Note We may extend this section in the future to allow creation of pseudo-elements from script.
CSSPseudoElement interface
allows pseudo-elements to be styleable from script
and makes them event targets.
interface CSSPseudoElement {
readonly attribute DOMString type;
readonly attribute CSSStyleDeclaration style;
};
CSSPseudoElement implements EventTarget;
The type attribute
is a string representing the type of the pseudo-element.
This can be one of the following values:
CSSStyleDeclaration [[!CSSOM]]
that allows directly setting style information (inline styles) onto the pseudo-element.
Inline styles on a CSSPseudoElement have precedence over all
style rules styling that pseudo-element.
Issue: This should cascade like actual inline styles, not be a different thing.
The EventTarget interface [[!DOM-LEVEL-2-EVENTS]]
must be implemented by all instances of CSSPseudoElement
as a conformance requirement of this module.
CSSPseudoElementList represents an ordered collection
of CSSPseudoElement instances.
interface CSSPseudoElementList {
readonly attribute unsigned long length;
CSSPseudoElement item(unsigned long index);
CSSPseudoElement getByType(DOMString type);
// replies null if no pseudo-element exists for
// the requested type
};
The length attribute
represents the number of CSSPseudoElement in the
collection or zero if it is empty.
The method item()
is used to retrieve a CSSPseudoElement by index.
It takes one parameter being the requested index into the collection.
Its return value is the CSSPseudoElement
at the requested index in the collection
or null if that is not a valid index.
The method getByType()
is used to retrieve a CSSPseudoElement
by its type.
Its return value is the CSSPseudoElement
in the collection that matches the type
or null if there is no CSSPseudoElement
in the collection for that type.
window interfaceWindow interface to retrieve
pseudo-elements created by a given element for a given type:
partial interface Window {
CSSPseudoElementList getPseudoElements(Element elt,
DOMString type);
};
The getPseudoElements() method
is used to retrieve all CSSPseudoElement instances
created by the element elt for the type type.
Its return value is a CSSPseudoElementList,
potentially empty if no pseudo-element exists for the given element and the given type.