Select All Elements With CSS Class Name Starting With, Ending With, Or Containing String

June 23, 2023 by Andreas Wik

CSS select element by part of class name

As you know, selecting all elements that have a specific class is simple:

.animal {
    border: 2px solid black;
}

 

But there may be times when you want to match all elements that have a class where its name starts with, ends with it, or just simply contains a specific string. Let’s check out how.

To match all elements with a class name that starts with “hotel”, use the ^ symbol:

/* Class name starts with "hotel" */
div[class^="hotel"] {
  background: #85c8ea;
}

 

To match all elements with a class name that contains “safety”, use the * symbol:

/* Class name contains "safety" */
div[class*="safety"] {
  background: seagreen;
  color: white;
}

 

To match all elements with a class name that ends with “contact”, use the $ symbol:

/* Class ends with "contact" */
div[class$="contact"] {
  background: #eeeeee;
}

 

 

Here is a CodePen you can play around with to test it:

See the Pen Untitled by Andreas Wik (@andreaswik) on CodePen.

Share this article

Recommended articles

@awikio