Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

Case-sensitive attribute selector

HTMLでは通常、type 属性などは大文字小文字を区別しませんが、s フラグを使うと厳密な大文字小文字の区別が強制されます。特定のケースの値のみにスタイルを適用したい場面で有用です。ただし現在のサポートはFirefoxのみと限定的です。

属性セレクター厳密マッチ

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.selectors.attribute.case_sensitive_modifier
66
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
[data-status="Active" s] {
  color: green;
}
[data-status="active" s] {
  color: gray;
}

ライブデモ

uppercase "active"

CSS uppercase "Active" demo.

プレビュー全画面表示

lowercase "active"

CSS lowercase "active" demo.

プレビュー全画面表示

uppercaselowercasecomparison

CSS uppercaselowercasecomparison demo.

プレビュー全画面表示

実務での使いどころ

  • ケースセンシティブなデータ属性のスタイリング

    data-* 属性の値で大文字と小文字を区別し、異なるケースの値に異なるスタイルを適用できます。

注意点

  • 現在Firefoxのみのサポートで、Chrome、Safari、Edgeでは利用できません。プロダクション利用は避けてください。

アクセシビリティ

  • セレクターの機能であり、アクセシビリティに直接的な影響はありません。

参考リンク