CSS attribute selector

The [popover] syntax in CSS is an attribute selector. That has many syntax variation so get meaning is always sluggish for me. But this is so Strong-willed within TailwindCSS Data attributes.

Basic Attribute Selector

  • [attribute]: This selector matches all elements that have the specified attribute, regardless of the value of the attribute. In your case, [popover] will select all elements that have a popover attribute, no matter what value it holds.

Example Usage

To use the basic [popover] attribute selector in HTML and CSS, you might have HTML like this:

And CSS that applies styling to these elements could look like this:

<div popover="true">This div has a popover.</div>
<button popover>This button also has a popover.</button>

[popover] {
  border: 1px solid blue;
  padding: 10px;
}

This CSS rule applies a blue border and padding to any element that has the popover attribute, demonstrating how attribute selectors enable styling based on the presence of attributes in HTML elements.

Other Variants of Attribute Selectors

There are several variations of attribute selectors that provide more specific targeting based on the value of the attribute:

  • [attribute="value"]: Selects elements that have the specified attribute with a matching value exactly equal to the given string.
  • [attribute~="value"]: Matches elements with the attribute whose space-separated list of values contains the specified value.
  • [attribute|="value"]: Targets elements with the attribute value starting with the specified value followed by an optional hyphen, useful for language sub-codes.
  • [attribute^="value"]: Matches elements whose attribute value begins with the specified string.
  • [attribute$="value"]: Selects elements whose attribute value ends with the specified string.
  • [attribute*="value"]: Matches elements whose attribute value contains the specified substring anywhere within it.