What’s the difference between html[lang=”en”] and html:lang(en) in CSS?

by

In HTML, both the :lang() pseudo-class and the attribute selector will match an element with the corresponding lang attribute.

The difference is that a browser may have other ways of determining the language of a given element when testing against the :lang() pseudo-class which may be defined by the document language and/or the implementation, whereas an attribute selector will only check an element for that given attribute, without any accompanying document-based semantics.

For example, in HTML, the pseudo-class will also match any of the element’s descendants for which there isn’t a different lang, depending on how a browser determines the language for those descendants. Usually, the descendants will inherit the language attribute from their ancestor if it is not explicitly set.

Here’s what the spec says:

The difference between :lang(C) and the ‘|=’ operator is that the ‘|=’ operator only performs a comparison against a given attribute on the element, while the :lang(C) pseudo-class uses the UAs knowledge of the document’s semantics to perform the comparison.

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). The P does not match the [lang|=fr] because it does not have a LANG attribute.

<body lang=fr>
  <p>Je suis français.</p>
</body>

Notice the specific phrasings of “has a LANG attribute” and “are in French”. These two phrases have very different meanings in English, as you might imagine.

In your example, the following selector will also match your .foo element:

.foo:lang(en)

But the following selectors won’t, if it doesn’t have its own lang attribute set:

.foo[lang="en"]
.foo[lang|="en"]

As for browser support, the :lang() pseudo-class is supported starting from IE8, so IE7 really is the only browser you will be unable to support by using the pseudo-class over the attribute selector.

Based on this understanding you can then answer the question “which should I use”: you should always use the :lang() pseudo-class by default, unless certain quirks (or the need to support IE7) require working around by using an attribute selector instead.

Selectors 4 not only brings enhanced functionality to the :lang() pseudo-class (thereby widening the gap in functionality between it and attribute selectors), but also introduces the :dir() pseudo-class for matching elements based on their directionality. Because directionality is a language-related property, the dir and lang attributes work similarly in HTML, and the difference between :dir() and its corresponding attribute selector is analogous to that between :lang() and its corresponding attribute selector — to the point where the first sentence of the following quotation is in fact a word-for-word copy of the same paragraph in the section describing :lang():

The difference between :dir(C) and ”[dir=C]” is that ”[dir=C]” only performs a comparison against a given attribute on the element, while the :dir(C) pseudo-class uses the UAs knowledge of the document’s semantics to perform the comparison. For example, in HTML, the directionality of an element inherits so that a child without a dir attribute will have the same directionality as its closest ancestor with a valid dir attribute. As another example, in HTML, an element that matches ”[dir=auto]” will match either :dir(ltr) or :dir(rtl) depending on the resolved directionality of the elements as determined by its contents. [HTML5]

More Related Contents:

  1. css3 nth of type restricted to class [duplicate]
  2. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  3. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  4. What is the difference between a pseudo-class and a pseudo-element in CSS?
  5. Does CSS have a :blur selector (pseudo-class)?
  6. What is the difference between :focus and :active?
  7. How to select the first, second, or third element with a given class name?
  8. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  9. What’s the difference between CSS3’s :root pseudo class and html?
  10. Why doesn’t this CSS :not() declaration filter down?
  11. CSS 3 nth of type restricted to class [duplicate]
  12. How to show the first N elements of a block and hide the others in css?
  13. Is there an opposite CSS pseudo-class to :hover?
  14. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  15. nth-child doesn’t respond to class [duplicate]
  16. Select elements by attribute in CSS
  17. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  18. Is the CSS :not() selector supposed to work with distant descendants?
  19. What is the difference between ‘>’ and a space in CSS selectors?
  20. Combining :last-child with :not(.class) selector in CSS
  21. Why can’t you group descendants in a CSS selector?
  22. Not CSS selectors
  23. What is this CSS selector? [class*=”span”]
  24. Is the :before pseudo-element allowed on an input[type=checkbox]?
  25. CSS select multiple descendants of another element
  26. Select all ‘tr’ except the first one
  27. What are the rules around whitespace in attribute selectors?
  28. CSS – First child without certain class
  29. CSS select first element with a certain class
  30. CSS selector based on width?

Leave a Comment