Search code examples
htmlcssw3c

selector[lang="en"] vs selector:lang(en-US)

I've been reading about the The language (lang) pseudo-class and wonder that the same effect can be achieved with the attribute selector. Both of the following codes achieve the same effect:

Using attribute selector:

<style>
p[lang="en-US"] 
{
 color: red;
}
</style>
<p lang="en-US">A paragraph of American text, gee whiz!</p>

Using language (lang) pseudo-class:

<style>
p:lang(en-US)
{
 color: red;
}
</style>
<p lang="en-US">A paragraph of American text, gee whiz!</p>

So, are they both equivalent? IF yes then what was the need to make the lang pseudo-class if the same could already be achieved with the attribute selector?

Solution

  • With an attribute selector you could only match the attribute on a specific element. Language information gets inherited. 

    p:lang(en-US)
{
 color: blue;
}
    <div lang="en-GB">
  <p>Blue is the colour</p>
</div>

<div lang="en-US">
  <p>Blue is the color</p>
</div>

    Note, you couldn't use a descendant combinator for this because languages can be nested.