Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →CSS :lang() selects elements according to the content language assigned to them by the document’s language semantics. It is not simply a test for a lang attribute on that same element: the language can be inherited or determined from other document information. Use it when styling should respond to the language of content rather than to a particular attribute string.
What does :lang() do?
The W3C Selectors Level 4 specification defines it this way: “The :lang() pseudo-class, which accepts a comma-separated list of one or more language ranges, represents an element whose content language is one of the languages listed in its argument.” In practice, the browser evaluates an element’s content language using the document language’s semantics, then matches it against the language range or ranges in the selector.
For example, this rule requests French-style quotation marks for elements whose content language matches French:
:lang(fr) {
quotes: "« " " »";
}This is an illustrative CSS example, not a claim about a particular browser test. The property controls quotation marks; :lang() is the part that selects based on language.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
How does CSS determine an element’s language?
In HTML, the lang global attribute declares the language of an element’s content. Its value is a BCP 47 language tag, such as fr or en-US. A language may be inherited from an ancestor when an element has no language declaration of its own; the element’s content language is therefore not necessarily represented by an attribute on that element. HTML language declaration and value behavior are described in the MDN reference for the lang attribute.
- An empty
langvalue indicates that the language is unknown. - An invalid language tag is not a valid declaration.
- The CSS pseudo-class uses the language the document semantics determine, not an unconditional text comparison against one attribute.
Does :lang(en) match lang="en-US"?
Yes, language-range matching treats en as matching the more specific tag en-US. The match is based on language subtags: a range can match the same tag or a tag with additional subtags, rather than an arbitrary string that merely begins with the same letters. Selectors Level 4 also allows multiple ranges and wildcard language ranges; consult its language pseudo-class section for the current syntax and examples.
For instance, a selector can list more than one language range in its argument. This is part of Level 4’s syntax; do not confuse it with the distinct wording of the older Selectors Level 3 specification.
:lang() versus a [lang] attribute selector
An attribute selector checks an attribute value directly. :lang() asks whether the element’s content language, as determined by document semantics, matches a language range. That distinction matters when language is inherited or otherwise determined without a corresponding attribute on the selected element.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
| Question | :lang() |
[lang] or [lang="…"] |
|---|---|---|
| What is tested? | The element’s content language under document-language semantics. | The presence of an attribute or its literal value. |
Must the selected element have an explicit lang attribute? |
No. Its language may be inherited or otherwise determined by the document. | Yes, if the selector requires [lang] on that element. |
| When are both useful? | Use with an attribute selector when you require both language matching and an explicit declaration. | The Level 4 specification gives [lang]:lang(de-DE) as an example of combining the checks. |
These selectors are related, but they are not interchangeable in every case. The distinction and combined-selector example are covered in Selectors Level 4.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How has the syntax changed across specification levels?
The current Selectors Level 4 syntax permits one or more comma-separated language ranges, including wildcard ranges. The older Selectors Level 3 specification describes matching as case-insensitive for ASCII and matching either the exact language tag or a tag followed by a hyphen and additional subtags. Keep that historical matching description distinct from Level 4’s current argument syntax.
For compatibility decisions, verify support for the exact syntax you intend to use in the browsers and versions relevant to your project. A broad compatibility statement does not by itself establish support for every current argument form.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
