web-dev-qa-db-ja.com

CSSのhtml [lang = "en"]とhtml：lang（en）の違いは何ですか？

次のように、言語ごとに異なるスタイルを指定できるようにするCSS言語の疑似クラス。

html:lang(en) .foo { ... }

ただし、これはIE7では機能しないため、属性セレクターを使用しています。

html[lang="en"] .foo { ... }

彼らは同じことをしているようですが、微妙な違いはありますか？そうでない場合、属性セレクターがまったく同じことを行うのに、なぜCSSに言語疑似クラスがあるのですか？

csscss-selectorspseudo-class
23
john

HTMLでは、:lang()疑似クラスと属性セレクターの両方が、対応するlang属性を持つ要素と一致します。

違いは、ドキュメント言語や実装によって定義される:lang()疑似クラスに対してテストするときに、ブラウザが特定の要素の言語を決定する他の方法を持っている可能性があるのに対し、属性セレクタはのみ要素のチェック指定された属性、ドキュメントベースのセマンティクスはありません。

たとえば、HTMLでは、疑似クラスは、ブラウザがそれらの子孫の言語を決定する方法に応じて、異なるlangがない要素の子孫のいずれにも一致します。通常、子孫は、明示的に設定されていない場合、祖先から言語属性を継承します。

spec の内容は次のとおりです。

:lang(C)と '| ='演算子の違いは、 '| ='演算子は要素の特定の属性に対してのみ比較を実行するのに対し、:lang(C)疑似クラスはUAを使用することです。比較を実行するためのドキュメントのセマンティクスに関する知識。

このHTMLの例では、BODYのみが_[lang|=fr]_に一致しますが（LANG属性があるため）、BODYとPの両方が:lang(fr)に一致します（両方ともフランス語であるため）。 PにはLANG属性がないため、Pは_[lang|=fr]_と一致しません。

_<body lang=fr>
  <p>Je suis français.</p>
</body>
_

「LANG属性があります」と「フランス語です」という特定の表現に注意してください。ご想像のとおり、これら2つのフレーズは英語では非常に異なる意味を持っています。

あなたの例では、次のセレクターも_.foo_要素と一致します。

_.foo:lang(en)
_

ただし、独自のlang属性が設定されていない場合、次のセレクターは機能しません。

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

ブラウザのサポートに関しては、:lang()疑似クラスがIE8以降でサポートされているため、属性セレクターで疑似クラスを使用してサポートできないブラウザはIE7だけです。

この理解に基づいて、「どちらを使用すべきか」という質問に答えることができます。デフォルトでは常に:lang()疑似クラスを使用する必要があります、特定の癖（またはIE7をサポートする必要がある）が代わりに属性セレクターを使用して回避する必要がある場合を除きます。

セレクター4 :lang()疑似クラスに拡張機能をもたらす （これにより、属性セレクターとの間の機能のギャップを広げる）だけでなく、 :dir() pseudo-class 方向性に基づいて要素を照合します。方向性は言語関連のプロパティであるため、dir属性とlang属性はHTMLでも同様に機能し、:dir()とそれに対応する属性セレクターの違いは:lang()とそれに対応する属性セレクター—次の引用の最初の文が実際には:lang()：

：dir（C）と '' [dir = C] ''の違いは、 '' [dir = C] ''は要素の特定の属性に対してのみ比較を実行するのに対し、：dir（C）は疑似-クラスは、ドキュメントのセマンティクスに関するUAの知識を使用して比較を実行します。たとえば、HTMLでは、要素の方向性が継承されるため、dir属性のない子は、有効なdir属性を持つ最も近い祖先と同じ方向性を持ちます。別の例として、HTMLでは、 '' [dir = auto] ''に一致する要素は、その内容によって決定される要素の解決された方向性に応じて、：dir（ltr）または：dir（rtl）のいずれかに一致します。 [HTML5]

32
BoltClock

他の誰も言及しなかったもう1つのこと-:lang() pseudoclassは、要素の言語をどのように設定するかに関心がありません。 XHTMLドキュメント（XML MIMEタイプの真のXHTML）では、_xml:lang="en"_を使用でき、要素は:lang(en)と一致しますが、_[lang="en"]_とは一致しません。

4
duri

仕様による 、

ドキュメントの言語で要素の人間の言語を決定する方法が指定されている場合、その言語に基づいて要素に一致するセレクターをCSSで記述できます。たとえば、HTML [HTML4]では、言語は「lang」属性、META要素の組み合わせ、および場合によってはプロトコルからの情報（HTTPヘッダーなど）によって決定されます。 XMLはxml：langと呼ばれる属性を使用し、言語を決定するための他のドキュメント言語固有のメソッドがある場合があります。

要素が言語Cの場合、疑似クラス '：lang（C）'が一致します。一致するかどうかは、要素の言語値と等しいか、ハイフンで区切られた部分文字列である識別子Cのみに基づいています。 '| ='演算子によって実行される場合と同じ方法で。要素の言語値に対するCの照合は、ASCIIの範囲内の文字に対して、大文字と小文字を区別せずに実行されます。識別子Cは有効な言語名である必要はありません。

あれは：

  1. 単純なlang属性以外にも、言語を指定する他の多くの方法で機能します。
    • 最も重要なことは、@ BoltClockの回答で詳しく説明されているように、言語は子要素によって継承されるため、要素自体だけでなく、コンテナー要素で（任意の方法で）指定された言語を使用します。
  2. _|=_セマンティクスを使用します。つまり、:lang(en)と:lang(us)は両方とも_span[lang=en-us]_と一致します。
  3. 大文字と小文字を区別しないことが保証されていますが、

セレクターの属性名と値の大文字と小文字の区別は、ドキュメントの言語によって異なります。

2
Domenic

Cssは、htmlタグlang属性だけでなく、すべての要素の属性セレクターをサポートします。たとえば、cssでは<a title="Jeeha" href="foo.html">bar</a>のようなhtmlをa[title=Jeeha] { ... }のように選択できます。

部分一致とバリアントの詳細については、 this リンクを参照してください。

0
kontur