CODEWITHSUNDEEP
htmlcsscss-selectors
Jose Mir
Jose Mir

Reputation: 118

Is there a way of selecting multiple Languages at once in CSS? How to use multiple language codes

I have this at the moment:

h5:is(:lang(fa), :lang(ur), :lang(ar), :lang(tg), :lang(ps)){ /* Farsi, Urdu, Arabic, Tajik, Pashto */
  font-family:
          'Noto Nastaliq Urdu', serif;
}

And I wanted to know if there is a way of shortening the selection of languages, so that :lang() is not repeated so many times. Rather looking for something like:

h5:is(:lang(fa, ur, ar...)){...}

But that doesn't work. Any help would be very helpful.

Upvotes: 3

Views: 760

Answers (1)

Zach Jensz
Zach Jensz

Reputation: 4078

No.
That's as concise as you're going to get with CSS alone.

However, you can use a preprocessed language such as scss to achieve what you want:

@function lang($first, $languages...) {
  $subsequent: ")";
  @each $language in $languages {
    $subsequent: $subsequent + ", :lang(" + $language + ")";
  }
  @return ":is(:lang(" + $first + $subsequent + ")";
}

h5#{lang(fa, ur, ar, tg, ps)} {
  font-family:
          'Noto Nastaliq Urdu', serif;
}

h5#{lang(fa)} {
  font-family:
          'Noto Nastaliq Urdu', serif;
}

Transpiles to:

h5:is(:lang(fa), :lang(ur), :lang(ar), :lang(tg), :lang(ps)) {
  font-family: "Noto Nastaliq Urdu", serif;
}

h5:is(:lang(fa)) {
  font-family: "Noto Nastaliq Urdu", serif;
}

Upvotes: 3

Related Questions