KSK
3/20/2018 - 12:45 AM

20180320 属性のターゲティング

CSSでは、srcやhref属性のコンテンツのように、特定の属性とそのコンテンツをターゲットにすることができます。

// すべてのzipファイルを対象(大文字と小文字を区別しない)
a[href$=".zip" i] { }
 
// google.comのリンクをレッドにします
[href*="google.com"] { color: red; }

//これはデバッグする時にも役立ちます。
例えば、img要素のalt属性が空の場合をチェックする時には、下記のように記述します。
img:not([alt]) {
 border: 2px dashed red;
}
 
img[alt=""] {
 border: 2px dashed red;
}