CSS 要素名[属性名|=”値”]で一般的にlang属性で使用する

2023年2月28日

環境
Google Chrome　109.0.5414.120
Windows 10 Home 64bit

構文
要素名[属性名|="値"]
ハイフン(-)で区切られた属性の値が複数ある場合で、指定の属性の値で始まっている要素にCSSを適用します。
一般的にlang属性で使用されます。
例p[lang|="zh"]
lang属性は、指定の値「zh」で始まっているのでCSSが適用されます。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
p[lang|="zh"] {
      color: green;
}
</style>
</head>
<body>
      <p lang="en-us en-gb">tokyo</p>
      <p lang="zh-CN zh-TW">oosaka</p>

</body>
</html>

結果
p[lang|="zh"]を設定して指定の値「en」が
始まっている要素「tokyo」の文字色が赤になります。

CSS

Posted by arkgame

関連記事: