What is the meaning of '^' symbol in css?

Question

What is the meaning of the '^' symbol in CSS? I found this on bootsrap. note: [class^=border] <------ (see code below)

.bd-example-border-utils [class^=border] {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    margin: .25rem;
    background-color: #f5f5f5;
 }

Answer 1

.bd-example-border-utils [class^=border]

This will select each div inside .bd-example-border-utils whose class attribute begins with: border

Answer 2

The ^= selector is used to select elements with a name that start with the specified value.

For example, the following example select all elements with a class attribute that begins with "border".

[class^="border"] {
  background-color: #f5f5f5;
}