Summarized test results:
CSS3 Text, language selectors

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 language selectors work in current browsers.

Updated

These tests check whether various methods of selecting language in CSS selectors work for styling text in HTML. 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 Details column and look just above the table. The detailed results show the date(s) the test result was recorded, and the version of the browser tested.

Any dependencies are shown in notes above the table, and notes below the table will usually provide any additional useful information, including an explanation of why a result was marked as 'partially successful'.

Results

Note that 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 do not use any vendor prefixes. Tests that do show support for vendor prefixes are listed in the next section.

:lang


Test link Assertion Detail
:lang(es), lang="es"
css3-selectors-lang-001.html
A :lang value that matches an identical lang attribute value on the same element will produce styling.
:lang(es), lang="es" on parent
css3-selectors-lang-002.html
A :lang value that matches an identical lang attribute value on a parent element will produce styling.
:lang(es), lang="ES"
css3-selectors-lang-004.html
A :lang value will match a lang attribute value regardless of case differences.
:lang(es), lang="es-MX"
css3-selectors-lang-005.html
A :lang value will match a lang attribute value when the latter contains additional subtags.
:lang(es-MX), lang="es"
css3-selectors-lang-006.html
A :lang value will NOT match a lang attribute value when the former contains more subtags.
:lang(es), lang="mx-es"
css3-selectors-lang-007.html
When the :lang value uses a single subtag, it will NOT match against an attribute value where it appears in a different position.
:lang(en-GB), lang="en-GB"
css3-selectors-lang-008.html
A :lang value with language and region subtags will match a lang attribute value with the same subtags.
:lang(en-GB), lang="en-GB-scouse"
css3-selectors-lang-009.html
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.
:lang(en-GB), lang="en-US"
css3-selectors-lang-010.html
A :lang value and a lang attribute value will NOT match if their region subtags differ.
:lang(az-Arab-IR), lang="az-Arab-IR"
css3-selectors-lang-011.html
A :lang value with language, script and region subtags will match a lang attribute value with the same language, script and region subtags.
:lang(az-Arab-IR), lang="az-IR"
css3-selectors-lang-012.html
A :lang value with language, script and region subtags will NOT match a lang attribute value with the script subtag missing.
:lang(cs-CZ), lang="cs-Latn-CZ"
css3-selectors-lang-014.html
A :lang value with language and region subtags will NOT match a lang attribute value with language, script and region subtags.
:lang(az-Arab-IR), lang="az-arab-IR"
css3-selectors-lang-015.html
A :lang value will match a lang attribute value regardless of case differences in the script tag.
:lang(es), xml:lang="es" (html)
css3-selectors-lang-016.html
[Exploratory] A :lang value that matches an identical xml:lang attribute value will NOT produce styling in pages served as HTML.

lang |=


Test link Assertion Detail
[lang|="es"], lang="es"
css3-selectors-lang-021.html
A lang|= value that matches an identical lang attribute value on the same element will produce styling.
[lang|="es"], lang="es" on parent
css3-selectors-lang-022.html
A lang|= value that matches an identical lang attribute value on the parent element will NOT produce styling.
[lang|="es"], lang="ES"
css3-selectors-lang-024.html
A lang|= value will match a lang attribute value regardless of case differences.
[lang|="es"], lang="es-MX"
css3-selectors-lang-025.html
A lang|= value will match a lang attribute value when the latter contains additional subtags.
[lang|="es-MX"], lang="es"
css3-selectors-lang-026.html
A lang|= value will NOT match a lang attribute value when the former contains more subtags.
[lang|="es"], lang="mx-es"
css3-selectors-lang-027.html
When the lang|= value uses a single subtag, it will NOT match against an attribute value where it appears in a different position.
[lang|="en-GB"], lang="en-GB"
css3-selectors-lang-028.html
A lang|= value with language and region subtags will match a lang attribute value with the same subtags.
[lang|="en-GB"], lang="en-GB-scouse"
css3-selectors-lang-029.html
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.
[lang|="en-GB"], lang="en-US"
css3-selectors-lang-030.html
A lang|= value and a lang attribute value will NOT match if their region subtags differ.
[lang|="az-Arab-IR"], lang="az-Arab-IR"
css3-selectors-lang-031.html
A lang|= value with language, script and region subtags will match a lang attribute value with the same language, script and region subtags.
[lang|="az-Arab-IR"], lang="az-IR"
css3-selectors-lang-032.html
A lang|= value with language, script and region subtags will NOT match a lang attribute value with the script subtag missing.
[lang|="cs-CZ"], lang="cs-Latn-CZ"
css3-selectors-lang-034.html
A lang|= value with language and region subtags will NOT match a lang attribute value with language, script and region subtags.
[lang|="az-Arab-IR"], lang="az-arab-IR"
css3-selectors-lang-035.html
A lang|= value will match a lang attribute value regardless of case differences in the script tag.
[lang|="es"], xml:lang="es" (html)
css3-selectors-lang-036.html
[Exploratory] A [lang|='es'] value that matches an identical xml:lang attribute value will NOT produce styling in pages served as HTML.

lang =


Test link Assertion Detail
[lang="es"], lang="es"
css3-selectors-lang-041.html
A lang= value that matches an identical lang attribute value on the same element will produce styling.
[lang="es"], lang="es" on parent
css3-selectors-lang-042.html
A lang|= value that matches an identical lang attribute value on the parent element will NOT produce styling.
[lang="es"], lang="ES"
css3-selectors-lang-044.html
A lang= value will match a lang attribute value regardless of case differences.
[lang="es"], lang="es-MX"
css3-selectors-lang-045.html
A lang= value will NOT match a lang attribute value when the latter contains additional subtags.
[lang="es-MX"], lang="es"
css3-selectors-lang-046.html
A lang= value will NOT match a lang attribute value when the former contains more subtags.
[lang="es"], lang="mx-es"
css3-selectors-lang-047.html
When the lang= value uses a single subtag, it will NOT match against an attribute value where it appears in a different position.
[lang="en-GB"], lang="en-GB"
css3-selectors-lang-048.html
A lang= value with language and region subtags will match a lang attribute value with the same subtags.
[lang="en-GB"], lang="en-GB-scouse"
css3-selectors-lang-049.html
A lang= value with 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.
[lang="en-GB"], lang="en-US"
css3-selectors-lang-050.html
A lang= value and a lang attribute value will NOT match if their region subtags differ.
[lang="az-Arab-IR"], lang="az-Arab-IR"
css3-selectors-lang-051.html
A lang= value with language, script and region subtags will match a lang attribute value with the same language, script and region subtags.
[lang="az-Arab-IR"], lang="az-IR"
css3-selectors-lang-052.html
A lang= value with language, script and region subtags will NOT match a lang attribute value with the script subtag missing.
[lang="cs-CZ"], lang="cs-Latn-CZ"
css3-selectors-lang-054.html
A lang= value with language and region subtags will NOT match a lang attribute value with language, script and region subtags.
[lang="az-Arab-IR"], lang="az-arab-IR"
css3-selectors-lang-055.html
A lang= value will match a lang attribute value regardless of case differences in the script tag.
[lang="es"], xml:lang="es" (html)
css3-selectors-lang-056.html
[Exploratory] A [lang='es'] value that matches an identical xml:lang attribute value will NOT produce styling in pages served as HTML.