Contents
In CSS, pattern matching rules determine which style rules apply toelements in thedocumenttree. These patterns, called
The case-sensitivity of document language element names inselectors depends on the document language. For example, in HTML,element names are case-insensitive, but in XML they arecase-sensitive.
The following table summarizes CSS 2.1 selector syntax:
Pattern | Meaning | Described in section |
---|---|---|
* | Matches any element. | Universalselector |
E | Matches any E element (i.e., an element of type E). | Typeselectors |
E F | Matches any F element that is a descendant ofan E element. | Descendantselectors |
E > F | Matches any F element that is a child ofan element E. | Child selectors |
E:first-child | Matches element E when E is the firstchild of its parent. | The :first-child pseudo-class |
E:link E:visited | Matches element E if E is the sourceanchor of a hyperlink of which the target is not yet visited (:link)or already visited (:visited). | The link pseudo-classes |
E:active E:hover E:focus | Matches E during certainuser actions. | The dynamic pseudo-classes |
E:lang(c) | Matches element of type E if it is in (human) language c(the document language specifies how language is determined). | The :lang() pseudo-class |
E + F | Matches any F element immediately preceded bya sibling element E. | Adjacent selectors |
E[foo] | Matches any E element with the"foo" attribute set (whatever the value). | Attribute selectors |
E[foo="warning"] | Matches any E element whose"foo" attribute value is exactly equal to "warning". | Attribute selectors |
E[foo~="warning"] | Matches any E element whose"foo" attribute value is a list of space-separated values, one ofwhich is exactly equal to "warning". | Attribute selectors |
E[lang|="en"] | Matches any E element whose"lang" attribute has a hyphen-separated list of valuesbeginning (from the left) with "en". | Attribute selectors |
DIV.warning | Language specific. (In HTML, the sameas DIV[class~="warning"].) | Class selectors |
E#myid | Matches any E element with IDequal to "myid". | ID selectors |
Asimple selector is eitheratype selector oruniversal selector followed immediatelyby zero or moreattributeselectors,ID selectors, orpseudo-classes, in any order. The simpleselector matches if all of its components match.
Note: the terminology used here in CSS 2.1 isdifferent from what is used in CSS3. For example, a "simple selector"refers to a smaller part of a selector in CSS3 than in CSS 2.1.See the CSS3 Selectors module[CSS3SEL].
A 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. 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, is equivalent to: CSS offers other "shorthand" mechanisms as well, includingmultiple declarationsandshorthand properties. 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: 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: 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"). Example(s): For example, consider the following rules: 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: 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: The third rule will match the EM in the following fragment: Example(s): The following selector: 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: 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: Example(s): The following example combines descendant selectors and child selectors: 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. 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: The next example reduces the vertical space separatingan H1 and an H2 that immediately follows it: 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": CSS 2.1 allows authors to specify rules that match elementswhich have certain attributes definedin the source document. Attribute selectors may match in four ways: 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: Example(s): In the following example, the selector matches all SPAN elements whose"class" attribute has exactly the value "example": 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": 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/". Example(s): The following rule hides all elements for which the value of the"lang" attribute is "fr" (i.e., the language is French). Example(s): The following rule will match for values of the "lang" attributethat begin with "en", including "en", "en-US", and "en-cockney": Example(s): Similarly, the following aural style sheet rules allow a scriptto be read aloud in different voices for each role: 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 If the style sheet contains the rules 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: Here, because the selector Working with HTML, authors may use the period ( Example(s): For example, we can assign style information to all elements withclass~="pastoral" as follows: The following assigns style only to H1 elements withclass~="pastoral": Given these rules, the first H1 instance below would not have greentext, while the second would: 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": 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. 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": In the following example, the style rule matchesthe element that has the ID value "z98y".The rule will thus match for the P element: 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: 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: 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. 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 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. 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: 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: Note that sinceanonymousboxes are not part of the document tree, they are not counted whencalculating the first child. For example, the EM in: The following two selectors are equivalent: User agents commonly display unvisited links differently frompreviously visited ones. CSS provides the pseudo-classes ':link' and':visited' to distinguish them: 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: Example(s): If the following link: 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. Interactive user agents sometimes change the rendering in responseto user actions. CSS provides three pseudo-classes for common cases: 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): 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: 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. 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: 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). 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. The :first-line pseudo-element applies special styles to thecontents of the first formatted line of a paragraph. Forinstance: 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: the lines of which happen to be broken as follows: might be "rewritten" by user agents to include the 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: the user agent could simulate start and end tags forSPAN when inserting the fictional tag sequence for :first-line. 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 The first line of a table-cell or inline-block cannot be the firstformatted line of an ancestor element. Thus, in Note that the first line of the P in this fragment: 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 is 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, 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: The following CSS 2.1 will make a drop cap initial letter span about two lines: This example might be formatted as follows: Thefictional tag sequence is: 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: is: The first letter of a table-cell or inline-block cannot be thefirst letter of an ancestor element. Thus, in The first letter must occur on thefirst formatted line. For example, inthis fragment: 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 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'. Assuming that a line break will occur before the word "ends", thefictional tagsequence for this fragment might be: 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. 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): 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): This will render the "S" of "Special!" in gold.5.2.1Grouping
h1 { font-family: sans-serif }h2 { font-family: sans-serif }h3 { font-family: sans-serif }
h1, h2, h3 { font-family: sans-serif }
5.3Universal selector
*[lang=fr]
and[lang=fr]
are equivalent.*.warning
and.warning
are equivalent.*#myid
and#myid
are equivalent.5.4Type selectors
h1 { font-family: sans-serif }
5.5Descendant selectors
A B
" matches when an elementB
is an arbitrary descendant of someancestor elementA
.h1 { color: red }em { color: red }
<H1>This headline is <EM>very</EM> important</H1>
h1 { color: red }em { color: red }h1 em { color: blue }
<H1>This <SPAN>headline is <EM>very</EM> important</SPAN></H1>
div * p
div p *[href]
5.6Child selectors
body > P { line-height: 1.3 }
div ol>li p
5.7Adjacent sibling selectors
math + p { text-indent: 0 }
h1 + h2 { margin-top: -5mm }
h1.opener + h2 { margin-top: -5mm }
5.8Attribute selectors
5.8.1Matching attributes and attribute values
[att]
[att=val]
[att~=val]
att
attribute 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]
att
attribute, itsvalue either being exactly "val" or beginning with "val" immediatelyfollowed by "-" (U+002D). This is primarily intended to allowhreflang
attribute on thea
element in HTML) as described in BCP 47([BCP47]) or its successor. Forlang
(orxml:lang
) language subcode matching, please seethe:lang
pseudo-class.h1[title] { color: blue; }
span[class=example] { color: blue; }
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
a[rel~="copyright"]a[href="http://www.w3.org/"]
*[lang=fr] { display : none }
*[lang|="en"] { color : red }
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
<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">
EXAMPLE[notation=decimal] { /*... default property settings ...*/ }EXAMPLE[notation=octal] { /*... other settings...*/ }
EXAMPLE { /*... default property settings ...*/ }EXAMPLE[notation=octal] { /*... other settings...*/ }
EXAMPLE[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
.
)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.)*.pastoral { color: green } /* all elements with class~=pastoral */
or just.pastoral { color: green } /* all elements with class~=pastoral */
H1.pastoral { color: green } /* H1 elements with class~=pastoral */
<H1>Not green</H1><H1>Very green</H1>
p.marine.pastoral { color: green }
5.9ID selectors
h1#chapter1 { text-align: center }
<HEAD> <TITLE>Match P</TITLE> <STYLE type="text/css"> *#z98y { letter-spacing: 0.3em } </STYLE></HEAD><BODY> <P id=z98y>Wide text</P></BODY>
<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>
[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}
.5.10Pseudo-elements andpseudo-classes
5.11Pseudo-classes
5.11.1:first-child pseudo-class
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>
p:first-child em { font-weight : bold }
<P>abc <EM>default</EM>
is the first child of the P.* > a:first-child /* A is first child of any element */a:first-child /* Same */
5.11.2The link pseudo-classes:
a:link { color: red }:link { color: red }
<A href="http://out.side/">external link</A>
has been visited, this rule:a.external:visited { color: blue }
will cause it to be blue.5.11.3The dynamic pseudo-classes::hover,
a:link { color: red } /* unvisited links */a:visited { color: blue } /* visited links */a:hover { color: yellow } /* user hovers */a:active { color: lime } /* active links */
a:focus { background: yellow }a:focus:hover { background: white }
5.11.4The language pseudo-class:
html:lang(fr-ca) { quotes: '« ' ' »' }html:lang(de) { quotes: '»' '«' '\2039' '\203A' }:lang(fr) > Q { quotes: '« ' ' »' }:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }
<body lang=fr> <p>Je suis Français.</p></body>
5.12Pseudo-elements
5.12.1 The
p:first-line { text-transform: uppercase }
<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>
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.
<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>
<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>
<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>
<DIV><P>Thisline...</P></DIV>
is the first line of the P (assumingthat both P and DIV are block-level).<DIV><PSTYLE="display: inline-block">Hello<BR>Goodbye</P>etcetera</DIV>
the first formatted line of the DIV is notthe line "Hello".<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.<DIV> <P>First paragraph</P> <P>Second paragraph</P></DIV>
<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>
5.12.2The:first-letter pseudo-element
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-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>
<P><SPAN><P:first-letter>T</P:first-letter>he first</SPAN> few words of an article in the Economist.</P>
<div><p>The first text.
<div><p><div:first-letter><p:first-letter>T</...></...>he first text.
<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.<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."<p>'<em>T...
, the UA maycreate a first-letter pseudo-element from one of the elements, bothelements, or simply not create a pseudo-element.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>
<P><P:first-line><P:first-letter> S </P:first-letter>ome text that </P:first-line> ends up on two lines </P>
5.12.3The
h1:before {content: counter(chapno, upper-roman) ". "}
p.special:before {content: "Special! "}p.special:first-letter {color: #ffd800}
[8]ページ先頭