CSSで特定の属性を持つ、かつ、特定の属性を持たないセレクタの指定方法
属性セレクタで、特定の属性を持つ要素を選択する場合は以下のようになります。
/* attr属性を持つ要素がマッチする */ [attr] { ... }
特定の属性を持たない要素を選択する場合は:not()擬似クラスを使用します。
/* attr属性を持たない要素がマッチする */ :not([attr]) { ... }
これらを以下のように組み合わせることで実現できます。
/* attr1属性を持つ、かつ、attr2属性を持たない要素がマッチ */ [attr1]:not([attr2]) { ... }
サンプル
See the Pen RybPxN by age (@ageage) on CodePen.
これは見た目のみの制御ですが、上記のようなセレクタはJavaScriptでも使用できるので実際にリンクを無効にする処理などにも使えます。
感想
CSSのセレクタはとてもたくさんの記述方法があるので、その都度調べるのが良さそうな感じがしますね。
