CODEWITHSUNDEEP
htmlcss
idep
idep

Reputation: 11

Apply different font-family to <p> tag according to HTML lang attribute

I have two font styles, and i want to apply each different font to <p> tag when lang attribute in html changed. For example when lang set to fr change <p> font-family to fr-font.

Upvotes: 0

Views: 1261

Answers (3)

Manaus
Manaus

Reputation: 141

You can select your elements with CSS' attribute selectors. Your code might look like this:

html[lang=fr] p {
    font-family: sans-serif;
}

Upvotes: 6

I_love_vegetables
I_love_vegetables

Reputation: 1341

u can use the :lang() attribute in css like this

p:lang(fr) {
  font-family: yourFont;
}

Upvotes: 0

Quentin
Quentin

Reputation: 944192

Use the :lang pseudo-class which matches an element based on what language it is specified to be (and languages are inherited so you don't need to worry about targetting an element with a specific attribute, descendant combinators, or nesting).

p:lang(en) {
  font-style: italic;
}

p:lang(fr) {
  color: blue;
}
<div lang="en">
  <p>Is this English?</p>
  <p lang="fr">Est-ce français?</p>
</div>

<div lang="fr">
  <p lang="en">Is this English?</p>
  <p>Est-ce français?</p>
</div>

Upvotes: 3

Related Questions