Use CSS to Target a Language

Use CSS to target a language

It is not possible without wrapping the Chinese characters into elements, like <span lang=zh>...</span> (for which you could then use :lang(zh) { ... }).

On the other hand, if Chinese and English characters look too different in size, it is probably caused by the use of stylistically incompatible fonts. If you set e.g. just font-family: Arial, then English characters will appear in Arial and Chinese character in some other font, depending on browser defaults, because Arial does not contain Chinese characters. Then the solution would be to use a font-family value that contains only such fonts that have Chinese characters (in acceptable style).

What's the difference between html[lang=en] and html:lang(en) in CSS?

In HTML, both the :lang() pseudo-class and the attribute selector will match an element with the corresponding lang attribute.

The difference is that a browser may have other ways of determining the language of a given element when testing against the :lang() pseudo-class which may be defined by the document language and/or the implementation, whereas an attribute selector will only check an element for that given attribute, without any accompanying document-based semantics.

For example, in HTML, the pseudo-class will also match any of the element's descendants for which there isn't a different lang, depending on how a browser determines the language for those descendants. Usually, the descendants will inherit the language attribute from their ancestor if it is not explicitly set.

Here's what the spec says:

The difference between :lang(C) and the ‘|=’ operator is that the ‘|=’ operator only performs a comparison against a given attribute on the element, while the :lang(C) pseudo-class uses the UAs knowledge of the document's semantics to perform the comparison.
In this HTML example, only the BODY matches [lang|=fr] (because it has a LANG attribute) but both the BODY and the P match :lang(fr) (because both are in French). The P does not match the [lang|=fr] because it does not have a LANG attribute.
<body lang=fr>
  <p>Je suis français.</p>
</body>

Notice the specific phrasings of "has a LANG attribute" and "are in French". These two phrases have very different meanings in English, as you might imagine.

In your example, the following selector will also match your .foo element:

.foo:lang(en)

But the following selectors won't, if it doesn't have its own lang attribute set:

.foo[lang="en"]
.foo[lang|="en"]

As for browser support, the :lang() pseudo-class is supported starting from IE8, so IE7 really is the only browser you will be unable to support by using the pseudo-class over the attribute selector.

Based on this understanding you can then answer the question "which should I use": you should always use the :lang() pseudo-class by default, unless certain quirks (or the need to support IE7) require working around by using an attribute selector instead.

Selectors 4 not only brings enhanced functionality to the :lang() pseudo-class (thereby widening the gap in functionality between it and attribute selectors), but also introduces the :dir() pseudo-class for matching elements based on their directionality. Because directionality is a language-related property, the dir and lang attributes work similarly in HTML, and the difference between :dir() and its corresponding attribute selector is analogous to that between :lang() and its corresponding attribute selector — to the point where the first sentence of the following quotation is in fact a word-for-word copy of the same paragraph in the section describing :lang():

The difference between :dir(C) and ''[dir=C]'' is that ''[dir=C]'' only performs a comparison against a given attribute on the element, while the :dir(C) pseudo-class uses the UAs knowledge of the document’s semantics to perform the comparison. For example, in HTML, the directionality of an element inherits so that a child without a dir attribute will have the same directionality as its closest ancestor with a valid dir attribute. As another example, in HTML, an element that matches ''[dir=auto]'' will match either :dir(ltr) or :dir(rtl) depending on the resolved directionality of the elements as determined by its contents. [HTML5]

CSS :lang() selector for elements in documents of undetermined language

Edit 2021: This has been accepted as a bug https://bugs.chromium.org/p/chromium/issues/detail?id=1281157

We provide language range in :lang() rule and they are matched against language tags. They've mentioned about supporting asterisks in language ranges:

Language ranges containing asterisks, for example, must be either correctly escaped or quoted as strings, e.g. :lang(*-Latn) or :lang("*-Latn") ref

And in old 2013 draft:

Each language range in :lang() must be a valid CSS identifier [CSS21] or consist of an asterisk (* U+002A) immediately followed by an identifier beginning with an ASCII hyphen (U+002D) for the selector to be valid. ref

But I can't get p:lang(\*-US) to work on Chrome and Firefox on Windows. The rule p:lang(en\002DUS) works thought, but p:lang(en\002D\002A) does not. Not sure about the status of the support for special range "*" in browsers. Also there is no mention of matching undefined by the special range "*" in Matching of Language Tags.

But,p:lang(\*) and p:not(:lang(\*)) work on iPadOs in both Safari and Chrome. Open this jsfiddle on ipad

worksonIOS
I think chromium doesn’t support the full :lang() feature.

Workaround: If a little bit of JavaScript is acceptable then you can try following solution:

document.addEventListener('DOMContentLoaded', init);

function init() {
  if (!document.documentElement.lang) {
    fetchSamePageHeaders(checkHeaderLanguage);
  }
}

//make a lightweight request to the same page to get headers
function fetchSamePageHeaders(callback) {
  var request = new XMLHttpRequest();
  request.onreadystatechange = function() {
    if (request.readyState === XMLHttpRequest.DONE) {
      if (callback && typeof callback === 'function') {
        callback(request.getAllResponseHeaders());
      }
    }
  };

  // The HEAD method asks for a response identical to that 
  // of a GET request, but without the response body.
  //you can also use 'GET', 'POST' method depending on situation      
  request.open('HEAD', document.location, true);
  request.send(null);
}

function checkHeaderLanguage(headers) {
  //console.log(headers);
  headers = headers.split("\n").map(x => x.split(/: */, 2))
    .filter(x => x[0]).reduce((ac, x) => {
      ac[x[0]] = x[1];
      return ac;
    }, {});

  if (!headers['content-language']) {
    console.log('No language in response header. Marking the html tag.');
    let html = document.querySelector('html');
    html.lang = 'dummyLang';
  } else {
    console.log('The response header has language:' + headers['content-language']);
  }
}

p {
  margin: 0;
}

p[lang=""],
p:lang(dummyLang) {
  color: darkgreen;
  font-size: 2em;
}

p:lang(en\2dus)::after {
  content: '<= english';
  font-size: 0.5em;
  color: rebeccapurple;
}

<p>I Want to select this.</p>
<p lang="">And this.</p>
<p lang="en-us">Not this.</p>
<span lang='en-us'>
    <p>Also, not this.</p>
    <p lang="">But, this too.</p>
</span>

Effective development and maintenance of large-scale CSS for multi-language websites

After around four years after posting this question, this need lastly is going to be address by w3. https://drafts.csswg.org/css-logical/

Properties that accept physical directional keyword values (top,
bottom, left, or right) are redefined to also accept the appropriate
flow-relative directional keywords. In such cases, the flow-relative
values can be used in place of the corresponding physical values. For
properties that take multiple keywords, combinations of flow-relative
and physical values are not allowed (unless otherwise specified in a
future specification).

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start
https://hitkey.nekokan.dyndns.info/writing-mode-switcher-logical.htm

Change css on Multi language website

What you need to modify in order to convert a left-to-right stylesheet to a right-to-left one:

Change html tag so it becomes <html dir="rtl">. This sets the base direction for the whole document to be right-to-left.
Modify margin values when margin-left and margin-right of some element are not equal. The same applies for padding.
Change the values of position properties: left and right. For example: left: 200px on some element in a ltr document becomes right: 200px in a rtl document.

After that, take a look at the page, and see if you need any additional minor modifications like box-shadow, text-shadow, etc.

CSSJanus

You can use CSSJanus to do the second and third steps above for you. However, you will need to do the <html> step yourself.

For more information

Visit this page from W3C, which answers the question:

How should I use the dir attribute and related markup to set text direction on structural elements in HTML?

How to target a specific tag to be affected by a specific CSS file

Try making a custom class for the buttons and then copying the css code for buttons from the paper.css file and applying it to the custom class.

Target ul and li within div using css

first thing is you should remove the . sign from the ul in your css.
we use . signt to define a class and # sign to define an id.
but for default elements or tags provided by html, we don't want to use those. we can use just there name.as an example if we put some style to body we can write like this.

body{
 background-color:black;
}

to get an better idea, I wrote a small code for you.hope this will help

<!DOCTYPE html><html><head> <title></title></head>
<style type="text/css"> body{  margin:0;  padding: 0; }
/* add styles only to for 'ul' element, inside the id="one" div */div#one ul{ list-style-type: none; color: orange;}

/* add style only to the 'li' elements inside the id="one" div. this means 'li' inside the 'ul' inside the 'div' which its id="one" */div#one ul li{ display: inline; margin: 20px;
}
</style>
<body>
 <div id="one">  <ul>   <li>one</li>   <li>two</li>   <li>three</li>   <li>four</li>   <li>five</li>  </ul> </div>
 <div id="two">  <ul>   <li>one</li>   <li>two</li>   <li>three</li>   <li>four</li>   <li>five</li>  </ul> </div>
</body></html>

Is there a CSS selector for elements containing certain text?

If I read the specification correctly, no.

You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element. I don't see anything for matching content within an element, though.

Use CSS to Target a Language