Yo u m i g h t b e w o n d e r i n g w h y w e c o u l d n՚t simply use an attribute selector
and have something like the following:
1 div[lang|=fr] {(^2) background-color: blue;
3 }
Here, we are targeting all div elements whose lang attribute is or starts
with fr, followed by an -. But if we had elements inside that div, they
wouldn՚t be targeted by this selector because their lang attribute isn՚t
specified. By using the :lang pseudo-class, the lang attribute is inherited
to all children of the elements (the whole body element could even be
holding the attribute).
The good news is that all latest versions of the major browsers support this
pseudo-class.
Conclusion
In surveying the examples in this article, you may be wondering why to
bother with most of them. True, the specification is far from being
approved, and it could change over time, but now is the time for
experimentation and to contribute to the final spec.
Try out these new properties, and think of how they could be improved or
how you could implement them to make your life easier in future. Having
examples of implementations is important to the process of adding a
property to the spec and, moreover, of implementing it in browsers. So, do
your bit to improve the lot of future Web designers and your own.