How to use wildcards with CSS selectors

by

The examples below show how to use wildcards in your CSS selectors.

To use a selector you need to take advantage of the attribute selector, for example div[attribute=’property’]. The attribute selector can be used on any valid element attribute – id, class, name etc.

‘Containing’ wildcard CSS selector

This example shows how to use a wildcard to select all div’s with a class that contains ‘string’. This could be at the start, the end or in the middle of the class.

This would target:

  • <div class=’string’>
  • <div class=’123string’>
  • <div class=’string123′>
  • <div class=’123string123′>

But not:

  • <div id=’string’>
  • <div class=’strin’>
div[class*='string'] {
color: red;
font-weight: 800;
}

‘Starts with’ wildcard CSS selector

This example shows how to use a wildcard to select all div’s with a class that starts with ‘string’.

This would target:

  • <div class=’string’>
  • <div class=’string123′>

But not:

  • <div class=’123string’>
div[class^='string'] {
color: red;
font-weight: 800;
}

‘Ends with’ wildcard CSS selector

This example shows how to use a wildcard to select all div’s that end with ‘string’.

This would target:

  • <div class=’string’>
  • <div class=’123string’>

But not:

  • <div class=’string123′>
div[class$='string'] {
color: red;
font-weight: 800;
}

‘Containing’ wildcard – where property is separated by a space

This example shows how to use a wildcard to select all div’s that contain string as a standalone property

This would target:

  • <div class=’string’>
  • <div class=’123 string’>

But not:

  • <div class=’string123′>
div[class~='string'] {
color: red;
font-weight: 800;
}