CSS [attribute~=value] Selector

Definition and Usage

CSS [attribute~=value] The selector is used to select elements that contain a specific word in the attribute value.

The following example will match elements with title="flower", title="summer flower", and title="flower new", but will not match elements with title="my-flower" or title="flowers".

Example

Select and set the styles of all elements that have a title attribute containing the word "flower":

[title~="flower"] {
  border: 5px solid green;
}

Try it yourself

CSS Syntax

[attribute ~= value] {
  css declarations;
}

Technical Details

Browser Support

The numbers in the table indicate the first browser version that fully supports this selector.