CSS Attribute Selectors & Custom Attributes

Topics & Timestamps

• [ Basic] Attribute Selectors | 00:01:37
  - Square brackets in CSS
  - Selects elements based on the presence of a specified attribute
  - Selects elements based on the presence of a specified attribute with a particular value
• Advanced Attribute Selectors | 00:03:07
  The term "advanced attribute selectors" isn't official in any way, we're using it for our own organization
  - Adding specific characters after the attribute name allows for more granular/advanced selecting based on the attribute value
  - The characters include: Tilde ~, Vertical Bar |, Caret ^, Dollar Sign $, Asterisk *
  - Tilde selects elements that contain a specific space-separated word in the value of a specified attribute
  - Vertical bar selects elements that have exactly the specified value or specified value separated by a hyphen
  - Caret selects elements whose attribute value started with the specified value
  - Dollar sign is the opposite of the caret, selecting elements whose attribute value ends with the specified value
  - Asterisk (wildcard) selects elements based on if an attribute value contains a specific value (does not have to be a whole word)
• Custom Attributes | 00:14:21
  - You can add your own attributes with their own unique name, and even misuse existing attributes with little consequence, but this is discouraged
  - Performing this discouraged behavior does not often break a site (ie the site won't crash) but it does make your HTML invalid, and can be problematic for future developers and accessibility tooling (ie screen readers)
  - Instead, if you need custom attributes, simply write a data- followed by the name you want
  - These are commonly referred to as data-* attributes
  - You can have more than one data attribute
  - Data attributes have their own JavaScript API (using the getAttribute method)
  - You can have JSON data inside a data attribute, you can pull and parse the data as needed

Sources

• Attribute Selectors & Advanced Attribute Selectors (W3Schools)
• Custom Attributes (CSS-Tricks)