Advanced Attribute Selectors
| The CLASS and ID attributes are easy to use, but sometimes, it is impossible to add them to the document. For example, if you are writing a style sheet for a set of documents that you are not allowed to edit, you have to write selectors that make use of whatever attributes and context there are. If the documents use attributes consistently, it may be possible to select elements based on them. CSS2.1 has three different advanced attribute selectors, plus two selectors that are designed for multilingual documents and that select elements based on the language of their contents. Selecting on the Presence of an AttributeA selector that matches elements based on whether they have a certain attribute is constructed by putting the attribute name in square brackets: [COMPACT] { font-weight: bolder } TABLE[BORDER] { border: thin solid } The first rule matches all elements that have a COMPACT attribute; the second matches all TABLE elements that have a BORDER attribute. The actual value of the attributes is not important, as long as the attribute is present. Here is another example, combining type selectors, contextual selectors, and advanced attribute selectors: TABLE[BORDER] TD { border: medium ridge } Note that in HTML, the names of attributes, like the names of elements, are case-insensitive. You can write BORDER and border. But, in document formats that are written in XML, the names of attributes and the names of elements are case-sensitive. In style sheets for XML-based documents, BORDER and border are not the same. Selecting on the Value of an AttributeA selector that matches on the value of an attribute is written like this: [ALIGN="left"] { text-align: left } This matches all elements that have an ALIGN attribute with the value left. In HTML, some attribute values are case-sensitive and others are not. Rather than list which is case-insensitive, we recommend that you try to write the attribute values in the selectors with the same case as they appear in the source document. This is especially important because in XML, all attribute values are case-sensitive. However, the rule of thumb for HTML attributes is that attributes that accept a limited set of keywords, such as the ALIGN and RULES attributes, are case-insenstive, while attributes that accept many different values, such as HREF and ALT, are case sensitive. Thus, [ALIGN]="left"] and [ALIGN="LEFT"] are the same, but [ALT="Diagram"] and [ALT="diagram"] are not. In case of doubt, consult an HTML book or the official HTML specification. Selecting on a Single Word in the Value of an AttributeSome attributes may accept space-separated lists of values. The CLASS attribute is an example, as is the REL attribute of A elements. Attributes, such as the ALT attribute, that typically have a short sentence as value, can also be regarded as a space-separated list of values. A selector that matches single words from such attributes is written as follows: [REL~="home"] { color: green } This matches elements such as <A REL="home"> or <... REL="up home"...>. In fact, the class selector can be expressed this way. The following two rules are equivalent: .note { text-decoration: underline } [CLASS~="note"] { text-decoration: underline } Although you can use this selector with attributes like ALT, which contain short phrases, you have to be careful. The selector [ALT~="Yes"] matches the element <IMG ALT="Yes, and No"...>, but not the element <IMG ALT="Yes, and No"...> because of the comma that is attached to the word. Selecting on the Language of an ElementDocuments are usually written in some human language, at least the documents for which a style sheet makes any sense. Some documents are written in a combination of languages; for example, an English article with French citations, or a manual in four languages. There are at least two reasons why a selector for language is necessary. The first is the case where you have a set of documents that must all have the same style sheet, but where some documents are in a different language. Although most of the style rules can be the same, certain styles must be different for each language; for example, the quotation marks (see Chapter 6). The second reason is the case of multilingual documents, which are documents that contain text in more than one language. A browser can get language data from two places. One is from the headers that are sent along with the document (but outside the document) when a Web server transfers the document to the browser. The HTTP protocol for transferring information between servers and clients has a special field for the language of the document. This is the default language of the document. An English article with quotations in Russian would be labeled as English, not Russian. The other place is in attributes on each element. All HTML elements may have a LANG attribute. In XML-based documents, the attribute is called XML:LANG, but otherwise, it is exactly the same. The value of the LANG attribute and of the HTTP header has a certain structure: It contains a two-letter language code (see Table 4.1) and optionally further precisions as to what region of the world (another two-letter code), or which dialect. Here are some examples:
Navajo (an American-Indian language) doesn't have a two-letter code in the ISO (International Organization for Standardization) list of languages. Instead, it uses a code that is registered with IANA (Internet Assigned Numbers Authority). The selector that checks for a language has the following form: [LANG|="en-uk"] { background: rgb(90%,90%,0%) } [LANG|="en-us"] { background: rgb(90%,90%,90%) } [LANG|="en"] { color: blue } The first matches elements that have an attribute LANG="en-uk" or LANG="en-uk-..." where the dots stand for arbitrary codes. The third rule matches everything the first two match, plus LANG="en". The result is that every element that is in English (and their child elements, if they don't override it) will have blue text against either a yellow background (for British English) or a light gray one (for American English). CSS2.1 also provides a language selector based on a pseudo-class. It is written like this: P:lang(nl) { font-style: italic } This works differently from the attribute selector because it selects all elements (all P elements in this case) that are in a certain language, not just those that have a LANG attribute. An element is considered to be in a certain language if
The following HTML fragment illustrates the effect of the LANG pseudo-class. The document has elements in two languages: English and French. The start tags of the elements that would match: lang(fr) are shown in bold: <BODY LANG="en"> <H1>English title</H1> <P>This is a paragraph in English, that leads up to the quotation: <BLOCKQUOTE LANG="fr"> <P>Ici commencent les lignes en français. Il y a même un mot en <B>gras.</B> <P>Encore un peu de français. </BLOCKQUOTE> <P>And here it is back to English again. </BODY> |
EAN: 2147483647
Pages: 215