0

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?

user31782
  • 7,087
  • 14
  • 68
  • 143

1 Answers1

2

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335