CSS Wildcard Selectors

CSS Wildcard Selectors are represented by various symbols such as *,^, or $. These selectors are used to select multiple elements simultaneously for applying CSS.

The attribute * selector

The [attribute*="val"] selector is used to select the elements whose attribute value contains the string ‘val’

syntax

[attribute*="value"]{
   //css property
}

The attribute ^ selector

The [attribute^="val"] selector used to select those elements whose attribute starts with a specified value ‘val’

[attribute^="value"]{
   //css property
}

The attribute $ selector

The [attribute$="val"] selector is used to select those elements whose attribute values ends with a specified with value ‘val’

[attribute$="value"]{
   //css property
}

example

See the Pen wildcard css by Arpit (@soniarpit) on CodePen.

Previous: CSS Media Queries

Next: CSS Gradients