【CSS】target=”_blank”を設定しているaタグを指定する方法
css
HTML
target="_blank"
セレクタ
<a>タグに設定したリンク先を開く時、別タブで開く設定をするためのtarget="_blank"の指定。
このリンクは別タブで開くということを認識してもらうための別タブアイコンを設定することがよくありますね。
この別タブアイコンを表示するためのクラスを指定している人もいるのではないでしょうか。
実はCSSにはtarget="_blank"が設定されているタグに対してのみ指定する方法が存在します。
この記事ではtarget="_blank"が設定されているタグに対してCSSを指定する方法をご紹介したいと思います。
この記事の目次を表示
target=”_blank”が指定されているaタグを指定する
まずはよくあるtarget="_blank"が設定されている<a>タグに対してCSSを指定する方法を見てみましょう。
<a class="blank" target="_blank">別タブで開く</a>.blank {
/* ここにスタイルを指定 */
}target="_blank"を設定するタグにクラスを設定して、CSSを指定していくやり方です。
実はクラスを設定しなくても、以下のようにCSSでセレクタを指定するだけでtarget="_blank"を設定したタグだけを指定することが出来ます。
a[target="_blank"] {
/* ここにスタイルを指定 */
}このようにセレクタを指定するだけで、target="_blank"を設定したタグだけを指定することが出来ます。
それでは、この書き方を使って、実際にtarget="_blank"を設定してあるタグに別タブアイコンを表示してみましょう。
CSSの指定はこちら。
a[target="_blank"]::after {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f08e";
}実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
まとめ
CSSには便利なセレクタがいろいろ用意されています。
知らなければその都度、クラスを設定したり回りくどい指定方法をすることになります。
こういう便利な指定方法は覚えておきたいですね。
