擬似クラスhas()の複数条件指定や注意点についてのまとめ
更新日：2024年01月28日has()の複数条件の指定方法は？
has(1つ目の要素, 2つ目の要素)
1つ目の条件指定方法としては、has()で複数の要素をコンマ繋ぎで指定していく方法です。
この場合は、OR条件で判定されるので、指定した要素を1つでも持っている場合に、CSSが適用されます。
1つでも条件が指定された場合にCSSが適用されるので、広範囲にCSSが適用されて、想定外の結果に可能性がある点に注意してくださいね。
has(1つ目の要素):has(2つ目の要素)
2つ目の条件指定方法としては、has():has()で要素の数だけhasを繋げて指定する方法です。
こちらの指定方法を使った場合には、AND条件で判定されるので、全ての条件を満たした要素にのみCSSが適用されます。
notと組み合わせたhasの使い方
has(:not(1つ目の要素, 2つ目の要素))
この場合は、OR条件の否定になるので、1つ目の要素と2つ目の要素、どちらの条件にも該当しない場合には、CSSが適用される記法になります。
全ての条件を否定する形になるので、特定条件の要素に対するCSSを適用したい場合に有効です。
has(1つ目の要素):has(:not(2つ目の要素))
この場合は、1つ目の要素に該当し、2つ目の要素には該当しないという条件を満たした要素にのみCSSが適用される記法になります。
特定の条件は否定したいけど、特定の条件は肯定した要素を探す際に便利な書き方です。
子要素や孫要素から要素を探せる
これまでのCSSでは指定が難しかった子要素や孫要素から要素を指定し、CSSを適用することができるため、使えるようになるとかなり便利です。2023年の年末には、Firefoxでも利用することができるようになったため、多くのブラウザで対応され、使い勝手が上がりました。
ぜひ活用くださいね。
hasやnotを使う際の注意点
hasを使うことで子要素や孫要素から要素を指定して、CSSを適用できるようになることを説明してきました。また、notを使うことで更に細かい条件での指定ができることも説明してきました。一方で注意も必要かなと感じているため、記載していきます。
HTMLの構造が変わるとCSSが適用されない可能性がある
hasやnotを使わずに、特定のclass名を指定した場合には、HTMLの構造が変わっても問題なく、CSSが適用されます。
一方で、hasやnotの条件指定されている場合には、HTML構造に依存するため、HTML変更によって思わぬ影響が出る可能性がある点に注意が必要です。
特に、コーディングルールが明確でない場合や引き継ぎが必要な場合には、要注意です。
hasやnotで条件が複雑になり、保守などが大変になる
hasやnot指定で条件を指定できることで、特定の要素に適切なCSSを適用させることができるようになります。
しかし、hasやnotを指定できるようになると複雑な条件を指定してしまう可能性もあります。
複数指定条件やnotを含む条件などを書き始めるとどんどん色んな条件を追加して、CSSを考えてしまうことも・・・
シンプルな方法でCSSを適用して、Webサイトを作れるのがベストなはずなので、hasやnotを乱用しないように注意が必要です。
