「新しいウインドウで開くリンクだけ見た目を変えたい」という要望を簡単に実現する方法として、HTMLの属性を指定して独自のCSSを適用するという方法があります。
CSSの属性セレクタとは
HTMLタグは基本的に【要素】【属性】【属性値】で成り立っており、通常はclassやidを指定してスタイルを適用させます。
しかし「新しいウインドウで開くリンクだけ見た目を変えたい」と言ったような場合は一つ一つ設定していくのも大変な為、属性に target が付いており尚かつ 属性値が _blank である物にだけスタイルを適用するという事が出来ます。
a[target="_blank"]{
color: #343434;
}CSS属性セレクタの一覧
| img[src] | srcを持つimg要素に適用 |
| img[src=”foo.jpg”] | 指定した属性と属性値を持つ要素に適用 <img src=”foo.jpg”> 適用される <img src=”foo2.jpg”> 適用されない |
| img[src^=”foo”] | 属性値が指定した文字列から始まる場合に適用 <img src=”food.jpg”> 適用される <img src=”/food.jpg”> 適用されない |
| img[src$=”jpg”] | 属性値が指定した文字列で終わる場合に適用 <img src=”food.jpg”> 適用される <img src=”food.gif”> 適用されない |
| img[class~=”foo”] | 指定した属性値が含まれる場合に適用 <img class=”foo large”> 適用される <img class=”food large”> 適用されない |
| img[class*=”foo”] | 属性値に指定した文字列を含む場合に適用 <img class=”afoo large”> 適用される <img class=”food large”> 適用される |
| img[class|=”foo”] | 属性値をハイフンで区切った時、指定した属性値から始まる場合に適用 <img class=”foo”> 適用される <img class=”foo-large”> 適用される <img class=”food”> 適用されない <img class=”food-large”> 適用されない |
コメント