text 20180320属性のターゲティング

Posted 2021-05-03

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;
}