Intended audience: users, XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, Web project managers, and anyone who wants to know how selectors work in current browsers.
These tests check whether various methods of selecting language in CSS selectors work for styling text in HTML and XHTML.
Note that the snapshot summaries of these test results are for released versions of the browsers tested. Versions that are still in development may provide better support for these features. The tests themselves do not test any vendor prefixes.
Note that some tests are served as text/html, and others as application/xhtml+xml, since there are two different attributes used for declaring language. The lang attribute is part of the HTML vocabulary, and the xml:lang attribute is an XML attribute.
To see the test, click on the link in the left-most column. To see detailed results for a single test, click on the link in the right-most column. To submit test data for a single test, click on the link in the right-most column and then follow the link on that page.
The tables show the latest results from the W3C Test Framework. Below the tables are summaries of the results at a given date. The table data may be more up-to-date than the summary. The tables may also contain some incorrectly scored tests, and tests that relate to non-released versions of browsers. These are not included in the summary.
| Assertion | Gecko | Presto | Trident | WebKit | Detailed results | |
|---|---|---|---|---|---|---|
| :lang(es), lang="es" | A :lang value that matches an identical lang attribute value will produce styling. | selectors-001 | ||||
| :lang(es), lang="es" (xml) | [Exploratory test] A :lang value that matches an identical lang attribute value will produce styling in a page served as XML. | selectors-001a | ||||
| :lang(es), lang="ES" | A :lang value will match a lang attribute value regardless of case differences. | selectors-002 | ||||
| :lang(es), lang="ES" (xml) | [Exploratory test] A :lang value will match a lang attribute value regardless of case differences in a page served as XML. | selectors-002a | ||||
| :lang(es), lang="es-MX" | A :lang value will match a lang attribute value when the latter contains additional subtags. | selectors-003 | ||||
| :lang(es-MX), lang="es" | A :lang value will not match a lang attribute value when the former contains more subtags. | selectors-004 | ||||
| lang(es), lang="mx-es" | When the :lang value uses a single subtag, it will not match against an attribute value where it appears in a different position. | selectors-005 | ||||
| :lang(en-GB), lang="en-GB" | A :lang value with language and region subtags will match a lang attribute value with the same subtags. | selectors-006 | ||||
| :lang(en-GB), lang="en-GB-scouse" | A :lang value with a multiple subtags will match a lang attribute value with multiple subtags as long as the first part is the same. | selectors-007 | ||||
| :lang(en-GB), lang="en-US" | A :lang value and a lang attribute value will not match if their region subtags differ. | selectors-008 | ||||
| :lang(az-Arab-IR), lang="az-Arab-IR" | A :lang value with language, script and region subtags will match a lang attribute value with the same language, script and region subtags. | selectors-009 | ||||
| :lang(az-Arab-IR), lang="az-IR" | A :lang value with language, script and region subtags will not match a lang attribute value with the script subtag missing. | selectors-010 | ||||
| :lang(cs-CZ), lang="cs-Latn-CZ" | A :lang value with language and region subtags will not match a lang attribute value with language, script and region subtags. | selectors-011 | ||||
| :lang(az-Arab-IR), lang="az-arab-IR" | A :lang value will match a lang attribute value regardless of case differences in the script tag. | selectors-012 | ||||
| :lang, Inheritance by inline elements | When styling is defined for a block element using :lang and the lang attribute, the styling should still be picked up by inline elements contained by that block element. | selectors-013 | ||||
| :lang, Inheritance from an ancestor, block elements | When styling is defined for a block element using :lang but the language is only declared using a lang attribute on an ancestor element, the styling should still be picked up. | selectors-014 | ||||
| :lang, Inheritance from an ancestor, inline elements | When styling is defined for an inline element using :lang but the language is only declared using a lang attribute on an ancestor element, the styling should still be picked up. | selectors-015 |
Links: Section 6.6.3 • Latest results for section 6.6.3 • Submit data for section 6.6.3 • Related tests
All browsers support :lang as expected.
In no browser did CSS selectors match a language set using the xml:lang (rather than lang) attribute.
Perhaps surprisingly, all browsers tested also supported :lang with a lang attribute when the document was served as XML.
| Assertion | Gecko | Presto | Trident | WebKit | Detailed results | |
|---|---|---|---|---|---|---|
| :lang(es), xml:lang="es" | A :lang value that matches an identical xml:lang attribute value will produce styling in pages served as XML. | selectors-050 | ||||
| :lang(es), xml:lang="es" (html) | [Exploratory test] A :lang value that matches an identical xml:lang attribute value will not produce styling in pages served as HTML. | selectors-072 | ||||
| :lang(es), xml:lang="ES" | A :lang value will match an xml:lang attribute value regardless of case differences. | selectors-051 | ||||
| :lang(es), xml:lang="es-MX" | A :lang value will match an xml:lang attribute value when the latter contains additional subtags. | selectors-052 | ||||
| :lang(es-MX), xml:lang="es" | A :lang value will not match an xml:lang attribute value when the former contains more subtags. | selectors-053 | ||||
| lang(es), xml:lang="mx-es" | When the :lang value uses a single subtag, it will not match against an xml:lang attribute value where that value appears in a different position. | selectors-054 | ||||
| :lang(en-GB), xml:lang="en-GB" | A :lang value with language and region subtags will match a xml:lang attribute value with the same subtags. | selectors-055 | ||||
| :lang(en-GB), xml:lang="en-GB-scouse" | A :lang value with a multiple subtags will match a xml:lang attribute value with multiple subtags as long as the first part is the same. | selectors-056 | ||||
| :lang(en-GB), xml:lang="en-US" | A :lang value and a xml:lang attribute value will not match if their region subtags differ. | selectors-057 | ||||
| :lang(az-Arab-IR), xml:lang="az-Arab-IR" | A :lang value with language, script and region subtags will match a xml:lang attribute value with the same language, script and region subtags. | selectors-058 | ||||
| :lang(az-Arab-IR), xml:lang="az-IR" | A :lang value with language, script and region subtags will not match a xml:lang attribute value with the script subtag missing. | selectors-059 | ||||
| :lang(cs-CZ), xml:lang="cs-Latn-CZ" | A :lang value with language and region subtags will not match a xml:lang attribute value with language, script and region subtags. | selectors-060 | ||||
| :lang(az-Arab-IR), xml:lang="az-arab-IR" | A :lang value will match an xml:lang attribute value regardless of case differences in the script tag. | selectors-061 | ||||
| :lang, Inheritance by inline elements | When styling is defined for a block element using :lang and the xml:lang attribute, the styling should still be picked up by inline elements contained by that block element. | selectors-062 | ||||
| :lang, Inheritance from an ancestor, block elements | When styling is defined for a block element using :lang but the language is only declared using an xml:lang attribute on an ancestor element, the styling should still be picked up. | selectors-063 | ||||
| :lang, Inheritance from an ancestor, inline elements | When styling is defined for an inline element using :lang but the language is only declared using an xml:lang attribute on an ancestor element, the styling should still be picked up. | selectors-064 |
Links: Section 6.6.3 • Latest results for section 6.6.3 • Submit data for section 6.6.3 • Related tests
All browsers support :lang as expected with xml:lang in documents served as XML.
| Assertion | Gecko | Presto | Trident | WebKit | Detailed results | |
|---|---|---|---|---|---|---|
| :lang, xml:lang vs. lang | When an xml:lang attribute and a lang attribute on the same element have different values, the xml:lang value will match :lang for pages served as application/xhtml+xml. | selectors-065 |
Links: Section 6.6.3 • Latest results for section 6.6.3 • Submit data for section 6.6.3 • Related tests
For documents served as XML, if both lang attribute and xml:lang attribute are present and have differing values, the xml:lang attribute always takes precedence.
| Assertion | Gecko | Presto | Trident | WebKit | Detailed results | |
|---|---|---|---|---|---|---|
| [lang|="es"], lang="es" | A lang|= value that matches an identical lang attribute value will produce styling. | selectors-018 | ||||
| [lang|="es"], lang="es" (xml) | [Exploratory test] A lang|= value that matches an identical lang attribute value will produce styling in a page served as XML. | selectors-018a | ||||
| [lang|="es"], lang="ES" | A lang|= value will match a lang attribute value regardless of case differences. | selectors-019 | ||||
| [lang|="es"], lang="ES" (xml) | [Exploratory test] A lang|= value will match a lang attribute value regardless of case differences in a page served as XML. | selectors-019a | ||||
| [lang|="es"], lang="es-MX" | A lang|= value will match a lang attribute value when the latter contains additional subtags. | selectors-020 | ||||
| [lang|="es-MX"], lang="es" | A lang|= value will not match a lang attribute value when the former contains more subtags. | selectors-021 | ||||
| [lang|="es"], lang="mx-es" | When the lang|= value uses a single subtag, it will not match against an attribute value where it appears in a different position. | selectors-022 | ||||
| [lang|="en-GB"], lang="en-GB" | A lang|= value with language and region subtags will match a lang attribute value with the same subtags. | selectors-023 | ||||
| [lang|="en-GB"], lang="en-GB-scouse" | A lang|= value with a multiple subtags will match a lang attribute value with multiple subtags as long as the first part is the same. | selectors-024 | ||||
| [lang|="en-GB"], lang="en-US" | A lang|= value and a lang attribute value will not match if their region subtags differ. | selectors-025 | ||||
| [lang|="az-Arab-IR"], lang="az-Arab-IR" | A lang|= value with language, script and region subtags will match a lang attribute value with the same language, script and region subtags. | selectors-026 | ||||
| [lang|="az-Arab-IR"], lang="az-IR" | A lang|= value with language, script and region subtags will not match a lang attribute value with the script subtag missing. | selectors-027 | ||||
| [lang|="cs-CZ"], lang="cs-Latn-CZ" | A lang|= value with language and region subtags will not match a lang attribute value with language, script and region subtags. | selectors-028 | ||||
| [lang|="az-Arab-IR"], lang="az-arab-IR" | A lang|= value will match a lang attribute value regardless of case differences in the script tag. | selectors-029 | ||||
| lang|=, Inheritance by inline elements | When styling is defined for a block element using lang|= and the lang attribute, the styling should still be picked up by inline elements contained by that block element. | selectors-030 | ||||
| lang|=, Inheritance from an ancestor, block elements | When styling is defined for a block element using lang|= but the language is only declared using a lang attribute on an ancestor element, the styling should NOT be picked up. | selectors-031 | ||||
| lang|=, Inheritance from an ancestor, inline elements | When styling is defined for an inline element using lang|= but the language is only declared using a lang attribute on an ancestor element, the styling should NOT be picked up. | selectors-032 |
Links: Section 6.3.1 • Latest results for section 6.3.1 • Submit data for section 6.3.1 • Related tests
All browsers support lang|= selectors as expected.
Unlike :lang, it seems that, for pages served as XML, lang|= selectors do not match class names when the case of the language value in the selector and the class name differs.
No browser matches collapsed script subtags between language and region subtags.
| Assertion | Gecko | Presto | Trident | WebKit | Detailed results | |
|---|---|---|---|---|---|---|
| [xml|lang|="es"], xml:lang="es" with @namespace | An xml|lang|= selector with an @namespace declaration that matches an identical xml:lang attribute value will produce styling. | selectors-066 | ||||
| [xml|lang|="es"], xml:lang="es" with no @namespace | An xml|lang|= selector with no @namespace declaration that matches an identical xml:lang attribute value will not produce styling. | selectors-067 |
Links: Section 6.3.1 • Latest results for section 6.3.1 • Submit data for section 6.3.1 • Related tests
All browsers support xml|lang|= (but only) when used with an @namespace declaration for documents served as XML.
| Assertion | Gecko | Presto | Trident | WebKit | Detailed results | |
|---|---|---|---|---|---|---|
| [lang="es"], lang="es" | A lang= value that matches an identical lang attribute value will produce styling. | selectors-034 | ||||
| [lang="es"], lang="es" (xml) | [Exploratory test] A lang= value that matches an identical lang attribute value will produce styling in a page served as XML. | selectors-034a | ||||
| [lang="es"], lang="ES" | A lang= value will match a lang attribute value regardless of case differences. | selectors-035 | ||||
| [lang="es"], lang="ES" (xml) | [Exploratory test] A lang= value will match a lang attribute value regardless of case differences in a page served as XML. | selectors-035a | ||||
| [lang="es"], lang="es-MX" | A lang= value will not match a lang attribute value when the latter contains additional subtags. | selectors-036 | ||||
| [lang="es-MX"], lang="es" | A lang= value will not match a lang attribute value when the former contains more subtags. | selectors-037 | ||||
| [lang="es"], lang="mx-es" | When the lang= value uses a single subtag, it will not match against an attribute value where it appears in a different position. | selectors-038 | ||||
| [lang="en-GB"], lang="en-GB" | A lang= value with language and region subtags will match a lang attribute value with the same subtags. | selectors-039 | ||||
| [lang="en-GB"], lang="en-GB-scouse" | A lang= value with a multiple subtags will not match a lang attribute value with multiple subtags if the latter has more subtags, even if the first two subtags are the same. | selectors-040 | ||||
| [lang="en-GB"], lang="en-US" | A lang= value and a lang attribute value will not match if their region subtags differ. | selectors-041 | ||||
| [lang="az-Arab-IR"], lang="az-Arab-IR" | A lang= value with language, script and region subtags will match a lang attribute value with the same language, script and region subtags. | selectors-042 | ||||
| [lang="az-Arab-IR"], lang="az-IR" | A lang= value with language, script and region subtags will not match a lang attribute value with the script subtag missing. | selectors-043 | ||||
| [lang="cs-CZ"], lang="cs-Latn-CZ" | A lang= value with language and region subtags will not match a lang attribute value with language, script and region subtags. | selectors-044 | ||||
| [lang="az-Arab-IR"], lang="az-arab-IR" | A lang= value will match a lang attribute value regardless of case differences in the script tag. | selectors-045 | ||||
| lang=, Inheritance by inline elements | When styling is defined for a block element using lang= and the lang attribute, the styling should still be picked up by inline elements contained by that block element. | selectors-046 | ||||
| lang=, Inheritance from an ancestor, block elements | When styling is defined for a block element using lang= but the language is only declared using a lang attribute on an ancestor element, the styling should NOT be picked up. | selectors-047 | ||||
| lang=, Inheritance from an ancestor, inline elements | When styling is defined for an inline element using lang= but the language is only declared using a lang attribute on an ancestor element, the styling should NOT be picked up. | selectors-048 |
Links: Section 6.3.1 • Latest results for section 6.3.1 • Submit data for section 6.3.1 • Related tests
All browsers support lang= selectors as expected for HTML pages, but case insensitive matches do not work for any browser in documents served as XML.
| Assertion | Gecko | Presto | Trident | WebKit | Detailed results | |
|---|---|---|---|---|---|---|
| [xml|lang="es"], xml:lang="es" with @namespace | An xml|lang= selector with an @namespace declaration that matches an identical xml:lang attribute value will produce styling. | selectors-069 | ||||
| [xml|lang="es"], xml:lang="es" with no @namespace | An xml|lang= selector with no @namespace declaration that matches an identical xml:lang attribute value will not produce styling. | selectors-070 |
Links: Section 6.3.1 • Latest results for section 6.3.1 • Submit data for section 6.3.1 • Related tests
All browsers support xml|lang= when used with a @namespace declaration for documents served as XML.
Styling using the escaped form, xml\:lang, didn't work. This is to be expected, since all the browsers support namespace declarations.