CSSの属性セレクタと疑似クラスの使い分け

Question

CSSのセレクタについて勉強しています。

以下の疑似クラスは、属性セレクタでも代替可能だと考えていますが、認識は合っていますか？

• :disabled と [disabled]
• :lang(jp) と [lang="jp"]

また、上記項目について、疑似クラスと属性セレクタを使い分けがあれば、おしえてください。

補足

• :checked と [checked]は違うことを確認しました。チェックボックスをON/OFF切り替えても、checked属性の値は残ったままだったので、:checked疑似クラスと動作が異なりました。

Answer 1

属性セレクタはあくまでも属性にかかるもので、状態によるものではありません。

p:lang(ja):before {
	content: '[' attr(lang) ']';
}
p[lang="ja"]:after {
	content: '(' attr(lang) ')';
}

<div lang="ja">
	<p lang="en">test</p>
	<p>テスト1</p>
	<p lang="ja">テスト2</p>
</div>

p:lang(ja)のほうは、"テスト1"にも適用されているのがわかるかと思います。

Comments

[yuji38kwmt]

ありがとうございます！納得できました！

Answer 2

:lang(ja)だと、ja-JPのようなサブコードが書いてある場合にもヒットします。属性セレクタの場合、[lang|="ja"]がほぼ同じ挙動です。