rel属性へのCSS適用について

Question

前提・実現したいこと

外部リンクに対してCSSを適用したいです。

a.link[target="_blank"]のような使い方をrel属性でもしたいのですが、仕様としては問題ないでしょうか？
classを追加すれば良い話ではありますが、追加箇所が多いのでHTMLを変更せずに一括で適用できないものかと思い質問させていただきました。

ソースコード例

a.link[rel="noopener noreferrer"]:after {
}

Comments

[miyabi_pudding]

実際にそのコードでやってみて、スタイルききましたか？

Answer 1

複数要素を設定する場合不確実ですよね・・・

• rel="noreferrer noopener"
• rel="noopener noreferrer help"

などには反応しません
これに対応するために無理やり

• a[rel*=noopener][rel*=noreferrer]{}

なんてすることも可能ですが、逆にこれは

• rel="noreferrer1 2noopener"
• rel="noopener_noreferrer"

のような間違ったものにも反応してしまいます。
外部に公開するようなサイトに書くには課題が残りますが、
ご自身が管理するごく身近なコミュニティや社内用など限定されたサイトなら
許容範囲内だと思います

Answer 2

全く問題ないかと思います。
ただ、詳細度が増えますので、その点にはお気をつけください。

詳細度 - CSS: カスケーディングスタイルシート | MDN

Answer 3

回答いただきありがとうございます。
外部リンクのみデザインを変えたいという目的から生じた疑問だったのですが、問題なく適用されるとはいえ少し不安要素が残りそうですね。
普通にclassを追加するか、もしくはhttpのURLで判別して適用させてみようと思います。