CSS 要素名[属性名|=”値”]で一般的にlang属性で使用する
環境
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」の文字色が赤になります。