This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.

Check out a free preview of the full CSS In-Depth, v2 course:
The "Linguistic Pseudo Classes" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle illustrates how to select elements based on the language declaration of that element, an element's ancestor, or the document language.

Get Unlimited Access Now

Transcript from the "Linguistic Pseudo Classes" Lesson

[00:00:02]
>> Estelle Weyl: Next we have linguistic or language pseudo classes. So CSS 2.1, we already saw that we, [INAUDIBLE] that came from CCS 1, no it came from 2.0. Which is any element that has an attribute, in this case, lang. So it's basically F, or F attribute pipe equals val.

[00:00:38] Right, remember this? It's basically any element F that has the attribute attribute, with a value that starts with the value with or without a dash. So it would match en, it would match en-us, it would match en-uk. So we've already had that forever. And the things is with this one, is this just matches that HTML element right?

[00:01:09] It doesn't match the entire document, well in this case it does because it's HTML. But if the language was declared in English in the HTML,
>> Estelle Weyl: So then we have the lang basically it says is this language in english? It doesn't have to be declared on that element itself.

[00:01:33] The first one is saying, is that attribute present on this element? The second one is saying is the language of this document here at this time right now? Because you can change it for an element. You can say the language of this paragraph is gonna be French, even though this whole document is in English, this paragraph is in French.

[00:01:51] And then you can target it with either p lang equals FR or p lang FR. And so the p lang fr would be, it is a whole document that is French, or a section of the page that is in French or it could be span lang fr. Which would be a span within that paragraph.

[00:02:11] That paragraph has a declaration of it be in French, but not the span itself. The first one, the element actually has to have that attribute physically on that element for it to match. The second one means, is this doing the natural language at this point in time.
>> Estelle Weyl: We also are going to get, so some languages, like there is Mandarin Chinese and there is some other language in Chinese, so it's like basically any Chinese language.

[00:02:41] Like here we have language en-es en-uk, but it could be sp-us, en-us and Vietnamese-us or whatever. The dialect that's spoken in the United States or like French Canadian, versus English Canadian you could match the Canadian. And then we also have direction, is this left to right or right to left?

[00:03:08] It doesn't have to be declared on that exact element. When you have an attribute selector it actually has to be clear on that element.