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

Case-sensitive attribute selector

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

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

概要

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

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 66+

モバイル

Chrome Android 未対応
Safari iOS 未対応
Firefox Android 66+

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク