Limited supportLimited browser support. Check compatibility before use.
Selectors Limited support

Case-sensitive attribute selector

The s identifier in a CSS attribute selector matches attribute values case-sensitively in document languages like HTML where attribute values are case-insensitive.

Selectors

Overview

The s identifier in a CSS attribute selector matches attribute values case-sensitively in document languages like HTML where attribute values are case-insensitive.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.selectors.attribute.case_sensitive_modifier
66
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

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

Live demo

uppercase "active"

CSS uppercase "Active" demo.

PreviewFullscreen

lowercase "active"

CSS lowercase "active" demo.

PreviewFullscreen

uppercaselowercasecomparison

CSS uppercaselowercasecomparison demo.

PreviewFullscreen

Use cases

  • Using Case-sensitive attribute selector

    The s identifier in a CSS attribute selector matches attribute values case-sensitively in document languages like HTML where attribute values are case-insensitive.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features