The elements of the document tree that match a selector are calledsubjects of the selector.A selector consisting of a single simple selector matches any elementsatisfying its requirements. Prepending a simple selector andcombinator to a chain imposes additional matching constraints, so thesubjects of a selector are always a subset of the elements matchingthe last simple selector.
Onepseudo-element may be appendedto the last simple selector in a chain, in which case the styleinformation applies to a subpart of each subject.
5.2.1Grouping
When several selectors share the same declarations, they may begrouped into a comma-separated list.
Example(s):
In this example, we condense three rules with identical declarationsinto one. Thus,
h1 { font-family: sans-serif }h2 { font-family: sans-serif }h3 { font-family: sans-serif }is equivalent to:
h1, h2, h3 { font-family: sans-serif }CSS offers other "shorthand" mechanisms as well, includingmultiple declarationsandshorthand properties.
5.3Universal selector
Theuniversalselector, written "*", matches the name of any elementtype. It matches any single element in thedocument tree.
If the universal selector is not the only component of asimple selector, the "*" may beomitted. For example:
*[lang=fr]and[lang=fr]are equivalent.*.warningand.warningare equivalent.*#myidand#myidare equivalent.
5.4Type selectors
Atypeselector matches the name of a document language elementtype. A type selector matches every instance of the element type inthe document tree.
Example(s):
The following rule matches all H1 elements in thedocument tree:
h1 { font-family: sans-serif }5.5Descendant selectors
At times, authors may want selectors to match an element that isthe descendant of another element in the document tree (e.g., "Matchthose EM elements that are contained by an H1 element").A B" matches when an elementB is an arbitrary descendant of someancestor elementA.
Example(s):
For example, consider the following rules:
h1 { color: red }em { color: red }Although the intention of these rules is to add emphasis to text bychanging its color, the effect will be lost in a case such as:
<H1>This headline is <EM>very</EM> important</H1>
We address this case by supplementing the previous rules with arule that sets the text color to blue whenever an EM occurs anywherewithin an H1:
h1 { color: red }em { color: red }h1 em { color: blue }The third rule will match the EM in the following fragment:
<H1>This <SPAN>headline is <EM>very</EM> important</SPAN></H1>
Example(s):
The following selector:
div * p
matches a P element that is a grandchild or later descendant of aDIV element. Note the white space on either side of the "*" is not partof the universal selector; the white space is a combinatorindicatingthat the DIV must be the ancestor of some element, and that thatelement must be an ancestor of the P.
Example(s):
The selector in the following rule, which combinesdescendant andattribute selectors,matches any element that (1) has the "href" attribute set and(2) is inside a P that is itself inside a DIV:
div p *[href]
5.6Child selectors
Achildselector matches when an element is thechild of some element. A childselector is made up of two or more selectors separated by ">".
Example(s):
The following rule sets the style of all P elements that are children of BODY:
body > P { line-height: 1.3 }Example(s):
The following example combines descendant selectors and child selectors:
div ol>li p
It matches a P element that is a descendant of an LI; the LI elementmust be the child of an OL element; the OL element must be adescendant of a DIV. Notice that the optional white space aroundthe ">" combinator has been left out.
For information on selecting the first child of an element, pleasesee the section on the:first-childpseudo-class below.
5.7Adjacent sibling selectors
Adjacent sibling selectors have the following syntax: E1 + E2,where E2 is the subject of the selector. The selector matches if E1and E2 share the same parent in the document tree and E1 immediatelyprecedes E2,ignoring non-element nodes (such as text nodes and comments).
Example(s):
Thus, the following rule states that when a P element immediatelyfollows a MATH element, it should not be indented:
math + p { text-indent: 0 }The next example reduces the vertical space separatingan H1 and an H2 that immediately follows it:
h1 + h2 { margin-top: -5mm }Example(s):
The following rule is similar to the one in the previous example,except that it adds a class selector. Thus, special formatting onlyoccurs when H1 hasclass="opener":
h1.opener + h2 { margin-top: -5mm }5.8Attribute selectors
CSS 2.1 allows authors to specify rules that match elementswhich have certain attributes definedin the source document.
5.8.1Matching attributes and attribute values
Attribute selectors may match in four ways:
[att]- Match when the element sets the "att" attribute, whateverthe value of the attribute.
[att=val]- Match when the element's "att" attribute value is exactly "val".
[att~=val]- Represents an element with the
attattribute whosevalue is a white space-separated list of words, one of which is exactly"val". If "val" contains white space, it will never represent anything(since the words areseparated by spaces).If "val" is the empty string, it will never represent anything either. [att|=val]- Represents an element with the
attattribute, itsvalue either being exactly "val" or beginning with "val" immediatelyfollowed by "-" (U+002D). This is primarily intended to allowhreflangattribute on theaelement in HTML) as described in BCP 47([BCP47]) or its successor. Forlang(orxml:lang) language subcode matching, please seethe:langpseudo-class.
Attribute values must be identifiers or strings. Thecase-sensitivity of attribute names and values in selectors depends onthe document language.
Example(s):
For example, the following attribute selector matches all H1 elements that specify the "title" attribute, whatever its value:
h1[title] { color: blue; }Example(s):
In the following example, the selector matches all SPAN elements whose"class" attribute has exactly the value "example":
span[class=example] { color: blue; }Multiple attribute selectors can be used to refer to severalattributes of an element, or even several times to the same attribute.
Example(s):
Here, the selector matches all SPAN elements whose"hello" attribute has exactly the value "Cleveland" and whose"goodbye" attribute has exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }Example(s):
The following selectors illustrate the differences between "=" and "~=".The first selector will match, for example, the value "copyright copyleft copyeditor" for the "rel" attribute. The secondselector will only match when the "href" attribute has the value "http://www.w3.org/".
a[rel~="copyright"]a[href="http://www.w3.org/"]
Example(s):
The following rule hides all elements for which the value of the"lang" attribute is "fr" (i.e., the language is French).
*[lang=fr] { display : none }Example(s):
The following rule will match for values of the "lang" attributethat begin with "en", including "en", "en-US", and "en-cockney":
*[lang|="en"] { color : red }Example(s):
Similarly, the following aural style sheet rules allow a scriptto be read aloud in different voices for each role:
DIALOGUE[character=romeo] { voice-family: "Laurence Olivier", charles, male } DIALOGUE[character=juliet] { voice-family: "Vivien Leigh", victoria, female }5.8.2Default attribute values in DTDs
Matching takes place on attribute values in the document tree.Default attribute values may be defined in a
More precisely, a UA may, but isnot required to, read an "externalsubset" of the DTD butis required to look for defaultattribute values in the document's "internal subset." (See[XML10]for definitions of these subsets.)Depending on the UA, a default attribute value defined in the externalsubset of the DTD might or might not appear in the document tree.
A UA that recognizes an XML namespace[XMLNAMESPACES] may, but is notrequired to, use its knowledge of that namespace to treat defaultattribute values as if they were present in the document. (E.g., anXHTML UA is not required to use its built-in knowledge of the XHTMLDTD.)
Note that, typically, implementations choose to ignoreexternal subsets.
Example(s):
Example:
For example, consider an element EXAMPLE with an attribute "notation"that has a default value of "decimal". The DTD fragment might be
<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">
If the style sheet contains the rules
EXAMPLE[notation=decimal] { /*... default property settings ...*/ }EXAMPLE[notation=octal] { /*... other settings...*/ }the first rule might not match elements whose "notation" attributeis set by default, i.e., not set explicitly. To catch all cases, theattribute selector for the default value must be dropped:
EXAMPLE { /*... default property settings ...*/ }EXAMPLE[notation=octal] { /*... other settings...*/ }Here, because the selectorEXAMPLE[notation=octal] ismorespecific than the typeselector alone, the style declarations in the second rule will overridethose in the first for elements that have a "notation" attribute valueof "octal". Care has to be taken that all property declarations thatare to apply only to the default case are overridden in the non-defaultcases' style rules.
5.8.3Class selectors
Working with HTML, authors may use the period (.)notation as an alternative to the~= notation whenrepresenting theclass attribute. Thus, for HTML,div.value anddiv[class~=value] have thesame meaning. The attribute value must immediately follow the"period" (.). UAs may apply selectors using theperiod (.) notation in XML documents if the UA has namespace specificknowledge that allows it to determine which attribute is the"class" attribute for the respective namespace. One suchexample of namespace specific knowledge is the prose in thespecification for a particular namespace (e.g., SVG 1.1[SVG11]describes theSVG"class" attribute and how a UA should interpret it, andsimilarly MathML 3.0[MATH30] describes theMathML"class" attribute.)
Example(s):
For example, we can assign style information to all elements withclass~="pastoral" as follows:
*.pastoral { color: green } /* all elements with class~=pastoral */or just.pastoral { color: green } /* all elements with class~=pastoral */The following assigns style only to H1 elements withclass~="pastoral":
H1.pastoral { color: green } /* H1 elements with class~=pastoral */Given these rules, the first H1 instance below would not have greentext, while the second would:
<H1>Not green</H1><H1>Very green</H1>
To match a subset of "class" values, each value must be precededby a ".".
Example(s):
For example, the following rule matches any P element whose "class" attributehas been assigned a list of space-separated values that includes "pastoral"and "marine":
p.marine.pastoral { color: green }This rule matches whenclass="pastoral blue aquamarine" but does not match forclass="pastoralblue".
Note. CSS gives so muchpower to the "class" attribute, that authors could conceivably designtheir own "document language" based on elements with almost noassociated presentation (such as DIV and SPAN in HTML) and assigningstyle information through the "class" attribute. Authors should avoidthis practice since the structural elements of a document languageoften have recognized and accepted meanings and author-defined classes maynot.
Note: If an element hasmultiple class attributes, their values must be concatenated withspaces between the values before searching for the class. As of thistime the working group is not aware of any manner in which thissituation can be reached, however, so this behavior is explicitlynon-normative in this specification.
5.9ID selectors
Document languages may contain attributes that are declared to beof type ID. What makes attributes of type ID special is that no twosuch attributes can have the same value; whatever the documentlanguage, an ID attribute can be used to uniquely identify itselement. In HTML all ID attributes are named "id"; XMLapplications may name ID attributes differently, but thesame restriction applies.
The ID attribute of a document language allows authors to assign anidentifier to one element instance in the document tree. CSS IDselectors match an element instance based on its identifier. A CSSID selector contains a "#" immediately followed by the IDvalue, which must be an identifier.
Note that CSS does not specify how a UA knows the IDattribute of an element. The UA may, e.g., read a document's DTD, havethe information hard-coded or ask the user.
Example(s):
The following ID selector matches the H1 element whose IDattribute has the value "chapter1":
h1#chapter1 { text-align: center }In the following example, the style rule matchesthe element that has the ID value "z98y".The rule will thus match for the P element:
<HEAD> <TITLE>Match P</TITLE> <STYLE type="text/css"> *#z98y { letter-spacing: 0.3em } </STYLE></HEAD><BODY> <P id=z98y>Wide text</P></BODY>In the next example, however, the style rule will only match an H1element that has an ID value of "z98y". The rule will not match theP element in this example:
<HEAD> <TITLE>Match H1 only</TITLE> <STYLE type="text/css"> H1#z98y { letter-spacing: 0.5em } </STYLE></HEAD><BODY> <P id=z98y>Wide text</P></BODY>ID selectors have a higher specificity than attribute selectors.For example, in HTML, the selector#p123 is more specificthan[id=p123] in terms of thecascade.
Note. In XML 1.0[XML10], the information about whichattribute contains an element's IDs is contained in a DTD. Whenparsing XML, UAs do not always read the DTD, and thus may not knowwhat the ID of an element is. If a style sheet designer knows orsuspects that this will be the case, he should use normal attributeselectors instead:[name=p371] instead of#p371. However, the cascading order of normal attributeselectors is different from ID selectors. It may be necessary to addan "!important" priority to the declarations:[name=p371]{color: red ! important}.
If an element has multiple ID attributes, all of them must betreated as IDs for that element for the purposes of the IDselector. Such a situation could be reached using mixtures of xml:id[XMLID], DOM3 Core[DOM-LEVEL-3-CORE], XML DTDs[XML10] andnamespace-specific knowledge.
5.10Pseudo-elements andpseudo-classes
In CSS 2.1, style is normally attached to an element based on itsposition in thedocument tree. Thissimple model is sufficient for many cases, but some common publishingscenarios may not be possible due to the structure of thedocument tree. For instance, in HTML4 (see[HTML4]), no element refers to the first line of aparagraph, and therefore no simple CSS selector may refer to it.
CSS introduces the concepts of
- Pseudo-elements create abstractions about the document tree beyondthose specified by the document language. For instance, documentlanguages do not offer mechanisms to access the first letter or firstline of an element's content. CSS pseudo-elements allow style sheetdesigners to refer to this otherwise inaccessibleinformation. Pseudo-elements may also provide style sheet designers away to assign style to content that does not exist in the sourcedocument (e.g., the:before and :afterpseudo-elements give access to generated content).
- Pseudo-classes classify elements on characteristics other thantheir name, attributes or content; in principle characteristics thatcannot be deduced from the document tree. Pseudo-classes may bedynamic, in the sense that an element may acquire or lose apseudo-class while a user interacts with the document. The exceptionsare':first-child', whichcan bededuced from the document tree, and':lang()', which can bededuced from the document tree in some cases.
Neither pseudo-elements nor pseudo-classes appear in the documentsource or document tree.
Pseudo-classes are allowed anywhere in selectors whilepseudo-elements may only be appended after the last simple selector ofthe selector.
Pseudo-element and pseudo-class names are case-insensitive.
Some pseudo-classes are mutually exclusive, while others can beapplied simultaneously to the same element. In case of conflictingrules, the normalcascadingorder determines the outcome.
5.11Pseudo-classes
5.11.1:first-child pseudo-class
The
Example(s):
In the following example, the selector matches any P elementthat is the first child of a DIV element. The rulesuppresses indentation for the first paragraph of a DIV:
div > p:first-child { text-indent: 0 }This selector would match the P inside the DIV of thefollowing fragment:<P> The last P before the note.<DIV> <P> The first P inside the note.</DIV>but would not match the second P in the followingfragment:
<P> The last P before the note.<DIV> <H2>Note</H2> <P> The first P inside the note.</DIV>
Example(s):
The following rule sets the font weight to 'bold' for any EMelement that is some descendant of a P element that is a firstchild:
p:first-child em { font-weight : bold }Note that sinceanonymousboxes are not part of the document tree, they are not counted whencalculating the first child.
For example, the EM in:
<P>abc <EM>default</EM>is the first child of the P.
The following two selectors are equivalent:
* > a:first-child /* A is first child of any element */a:first-child /* Same */
5.11.2The link pseudo-classes::link and:visited
User agents commonly display unvisited links differently frompreviously visited ones. CSS provides the pseudo-classes ':link' and':visited' to distinguish them:
- The :link pseudo-class applies for links that havenot yet been visited.
- The :visited pseudo-class applies once the link has beenvisited by the user.
UAs may return a visited link to the (unvisited) ':link' state atsome point.
The two states are mutually exclusive.
The document language determines which elements are hyperlinksource anchors. For example, in HTML4, the link pseudo-classesapply to A elements with an "href" attribute. Thus, the followingtwo CSS 2.1 declarations have similar effect:
a:link { color: red }:link { color: red }Example(s):
If the following link:
<A href="http://out.side/">external link</A>has been visited, this rule:
a.external:visited { color: blue }will cause it to be blue.Note. It is possible for style sheet authors to abuse the:link and :visited pseudo-classes to determine which sites a user hasvisited without the user's consent.
UAs may therefore treat all links as unvisited links, or implementother measures to preserve the user's privacy while rendering visitedand unvisited links differently. See[P3P] for more informationabout handling privacy.
5.11.3The dynamic pseudo-classes::hover,:active , and:focus
Interactive user agents sometimes change the rendering in responseto user actions. CSS provides three pseudo-classes for common cases:
- The :hover pseudo-class applies while the user designates anelement (with some pointing device), but does not activate it. Forexample, a visual user agent could apply this pseudo-class when thecursor (mouse pointer) hovers over a box generated by the element.User agents not supportinginteractive mediado not have to support this pseudo-class.Some conforming user agents supportinginteractive mediamay not be able to support this pseudo-class (e.g., a pen device).
- The :active pseudo-class applies while an element is beingactivated by the user. For example, between the times the user pressesthe mouse button and releases it.
- The :focus pseudo-class applies while an element has thefocus (accepts keyboard events or other forms of text input).
An element may match several pseudo-classes at the same time.
CSS does not define which elements may be in the above states, orhow the states are entered and left. Scripting may change whetherelements react to user events or not, and different devices and UAsmay have different ways of pointing to, or activating elements.
CSS 2.1 does not define if the parent of an element that is':active' or ':hover' is also in that state.
User agents are not required to reflow a currently displayeddocument due to pseudo-class transitions. For instance, a style sheetmay specify that the
Example(s):
a:link { color: red } /* unvisited links */a:visited { color: blue } /* visited links */a:hover { color: yellow } /* user hovers */a:active { color: lime } /* active links */Note that the A:hover must be placed after the A:link and A:visitedrules, since otherwise the cascading rules will hide the
Example(s):
An example of combining dynamic pseudo-classes:
a:focus { background: yellow }a:focus:hover { background: white }The last selector matches A elements that are in pseudo-class:focus and in pseudo-class :hover.
For information about the presentation of focus outlines, pleaseconsult the section ondynamicfocus outlines.
Note.In CSS1, the ':active' pseudo-class was mutuallyexclusive with ':link' and ':visited'. That is no longer the case. Anelement can be both ':visited' and ':active' (or ':link' and':active') and the normal cascading rules determine which styledeclarationsapply.
Note.Also note that in CSS1, the ':active' pseudo-class only applied tolinks.
5.11.4The language pseudo-class::lang
If the document language specifies how the
The pseudo-class ':lang(C)' matches if the element is in languageC. Whether there is a match is based solely on the identifier Cbeing either equal to, or a hyphen-separated substring of, theelement's language value, in the same way as if performed by the'|=' operator. The matching of Cagainst the element's language value is performed case-insensitivelyfor characters within the ASCII range.The identifier C does not have to be a valid language name.
C must not be empty.
Note: It is recommended that documents andprotocols indicate language using codes from BCP 47[BCP47] orits successor, and by means of "xml:lang" attributes in the case ofXML-based documents[XML10]. See"FAQ: Two-letter or three-letter language codes."
Example(s):
The following rules set the quotation marks for an HTML documentthat is either in Canadian French or German:
html:lang(fr-ca) { quotes: '« ' ' »' }html:lang(de) { quotes: '»' '«' '\2039' '\203A' }:lang(fr) > Q { quotes: '« ' ' »' }:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }The second pair of rules actually set the
Note the difference between [lang|=xx] and :lang(xx). In this HTML example, only the BODY matches [lang|=fr] (because it has a LANG attribute) but both the BODY and the P match :lang(fr) (because both are in French).
<body lang=fr> <p>Je suis Français.</p></body>
5.12Pseudo-elements
Pseudo-elements behave just like real elements in CSS with theexceptions described below andelsewhere.
Note that the sections below do not define theexact rendering of ':first-line' and ':first-letter' in all cases. Afuture level of CSS may define them more precisely.
5.12.1 The:first-line pseudo-element
The :first-line pseudo-element applies special styles to thecontents of the first formatted line of a paragraph. Forinstance:
p:first-line { text-transform: uppercase }The above rule means "change the letters of the first line ofevery paragraph to uppercase". However, the selector "P:first-line"does not match any real HTML element. It does match a pseudo-elementthatconforming user agentswill insert at the beginning of every paragraph.
Note that the length of the first line depends on a number offactors, including the width of the page, the font size, etc. Thus,an ordinary HTML paragraph such as:
<P>This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identifiedby a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>
the lines of which happen to be broken as follows:
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THATwill be broken into several lines. The firstline will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.
might be "rewritten" by user agents to include the
<P><P:first-line> This is a somewhat long HTML paragraph that</P:first-line> will be broken into severallines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>
If a pseudo-element breaks up a real element, the desired effectcan often be described by a fictional tag sequence that closes andthen re-opens the element. Thus, if we mark up the previous paragraphwith a SPAN element:
<P><SPAN> This is a somewhat long HTMLparagraph that will be broken into severallines.</SPAN> The first line will be identifiedby 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 forSPAN when inserting the fictional tag sequence for :first-line.
<P><P:first-line><SPAN> This is asomewhat long HTMLparagraph that will</SPAN></P:first-line><SPAN> bebroken into severallines.</SPAN> The first line will be identifiedby a fictional tag sequence. The other lineswill be treated as ordinary lines in the paragraph.</P>
The
The "first formatted line" of anelement may occur inside ablock-level descendant in the same flow (i.e., a block-leveldescendant that is not positioned and not a float). E.g., the firstline of the DIV in<DIV><P>Thisline...</P></DIV> is the first line of the P (assumingthat both P and DIV are block-level).
The first line of a table-cell or inline-block cannot be the firstformatted line of an ancestor element. Thus, in<DIV><PSTYLE="display: inline-block">Hello<BR>Goodbye</P>etcetera</DIV> the first formatted line of the DIV is notthe line "Hello".
Note that the first line of the P in this fragment:<p><br>First... does not contain any letters(assuming the default style for BR in HTML 4). The word "First" isnot on the first formatted line.
A UA should act as if the fictional start tags of the first-linepseudo-elements were nested just inside the innermost enclosingblock-level element. (Since CSS1 and CSS2 were silent on this case,authors should not rely on this behavior.) Here is an example. Thefictional tag sequence for
<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>
The:first-line pseudo-element is similarto an inline-level element, but with certain restrictions. Thefollowing properties apply to a :first-line pseudo-element:font properties,colorproperty,backgroundproperties,
5.12.2The:first-letter pseudo-element
The :first-letter pseudo-element must select the first letter ofthe first line of a block, if it is not preceded by any other content(such as images or inline tables) on its line. The :first-letterpseudo-element may be used for"initial caps" and"drop caps", which are common typographical effects. Thistype of initial letter is similar to an inline-level element if its'float' property is 'none',otherwise it is similar to a floated element.
These are the properties that apply to :first-letter pseudo-elements:font properties,'text-decoration','text-transform','letter-spacing','word-spacing' (when appropriate),'line-height','float','vertical-align' (only if 'float' is 'none'),margin properties,padding properties,border properties,color property,background properties.UAs may apply other properties as well.To allow UAs to render a typographically correct drop cap or initialcap, the UA may choose a line-height, width and height based on theshape of the letter, unlike for normal elements. CSS3 is expected tohave specific properties that apply to first-letter.
This example shows a possible rendering of an initial cap. Notethat the 'line-height' that is inherited by the first-letterpseudo-element is 1.1, but the UA in this example has computed theheight of the first letter differently, so that it does not cause anyunnecessary space between the first two lines. Also note that thefictional start tag of the first letter is inside the SPAN, and thusthe font weight of the first letter is normal, not bold as the SPAN:
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.
The following CSS 2.1 will make a drop cap initial letter span about two lines:
<!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-style: italic; 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:
Thefictional tag sequence is:
<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-elementstart tag is inserted right after the start tag of the block element.
In order to achieve traditional drop caps formatting, user agentsmay approximate font sizes, for example to align baselines. Also, theglyph outline may be taken into account when formatting.
Punctuation (i.e, characters defined in Unicode[UNICODE] in the"open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other"(Po) punctuation classes), thatprecedes or follows the first letter should be included, as in:
The ':first-letter' also applies if the first letter is in fact adigit, e.g., the "6" in "67 million dollars is a lot of money."
The :first-letter pseudo-element appliestoblock container elements.
The :first-letter pseudo-element can be used with all such elements thatcontain text, or that have a descendant in the same flow that containstext. A UA should act as if the fictional start tag of thefirst-letter pseudo-element is just before the first text of theelement, even if that first text is in a descendant.
Example(s):
Here is an example. The fictional tag sequence for this HTMLfragment:
<div><p>The first text.
is:
<div><p><div:first-letter><p:first-letter>T</...></...>he first text.
The first letter of a table-cell or inline-block cannot be thefirst letter of an ancestor element. Thus, in<DIV><PSTYLE="display: inline-block">Hello<BR>Goodbye</P>etcetera</DIV> the first letter of the DIV is not theletter "H". In fact, the DIV does not have a first letter.
The first letter must occur on thefirst formatted line. For example, inthis fragment:<p><br>First... the first linedoes not contain any letters and ':first-letter' does not match anything(assuming the default style for BR in HTML 4). In particular, itdoes not match the "F" of "First."
If an element is alist item('display: list-item'), the ':first-letter' applies to the firstletter in the principal box after the marker. UAs may ignore':first-letter' on list items with 'list-style-position: inside'. Ifan element has ':before' or ':after' content, the ':first-letterapplies to the first letter of the elementincluding thatcontent.
E.g., after the rule 'p:before {content: "Note: "}', the selector'p:first-letter' matches the "N" of "Note".
Some languages may have specific rules about how to treat certainletter combinations. In Dutch, for example, if the letter combination"ij" appears at the beginning of a word, both letters should beconsidered within the :first-letter pseudo-element.
If the letters that would form the first-letter are not in the sameelement, such as "'T" in<p>'<em>T..., the UA maycreate a first-letter pseudo-element from one of the elements, bothelements, or simply not create a pseudo-element.
Similarly, if the first letter(s) of the block are not at the startof the line (for example due to bidirectional reordering), then the UAneed not create the pseudo-element(s).
Example(s):
The following example illustrateshow overlapping pseudo-elements may interact. The first letter ofeach P element will be green with a font size of '24pt'. The rest ofthe first formatted line will be 'blue' while the rest of theparagraph will be 'red'.
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>Assuming that a line break will occur before the word "ends", thefictional tagsequence 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 that the :first-letter element is inside the :first-lineelement. Properties set on :first-line are inherited by:first-letter, but are overridden if the same property is set on:first-letter.
5.12.3The:before and:after pseudo-elements
The ':before' and ':after' pseudo-elements can be used to insertgenerated content before or after an element's content. They areexplained in the section ongeneratedtext.
Example(s):
h1:before {content: counter(chapno, upper-roman) ". "}When the :first-letter and :first-line pseudo-elements are appliedto an element having content generated using :before and :after, theyapply to the first letter or line of the element including thegenerated content.
Example(s):
p.special:before {content: "Special! "}p.special:first-letter {color: #ffd800}This will render the "S" of "Special!" in gold.
[8]ページ先頭