aタグのtarget=”_blank”にCSSを指定する方法

htmlでリンクを作成する<a>タグにtarget="_blank"という要素があります。このtarget="_blank"を含むリンクにcssを適用する方法をまとめておきます。

cssで<a>タグに指定する方法

まずは基本的な方法になりますが、<a>タグにcssを指定すればリンクの見た目を変更することができます。

<a>サンプル</a>

a {
    color:#0099FF;
}

サンプル

cssセレクタを使用する方法

通常の<a>タグと、target="_blank"をつけた<a>タグの見た目を変えたい場合は、cssセレクタを使用します。

<a>通常リンク</a>
<a target="_blank">セレクタ適用</a>

a {
    color:#0099FF;
}
a[target="_blank"] {
    color:#FF8C00;
}

通常リンク
セレクタ適用

クラスで指定する方法

cssセレクタが使えない場合は、クラスを指定することで個別にcssを適用することができます。

<a>通常リンク</a>
<a target="_blank" class="blank">セレクタ適用</a>

a {
    color:#0099FF;
}
a.blank {
    color:#FF8C00;
}

通常リンク
blankクラス

target="_blank"のみ個別に指定したい場合や、クラスで個別に見た目を変えたい場合に、それぞれの方法を使い分けます。