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

user_8030607 0
Viewed 36

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.

css-selectors css html
1 Answers

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;
}
user_141905430
Related