Match All Elements Having Class Name Starting With a Specific String

CSS: Class name selector- name starts with

The selector you are using *= matches any attribute containing that string.

Instead, you want ^=, which matches any attribute beginning with that string.

A combination would work best:

a[class^='color-'], a[class*=' color-'] { ... }

See MDN page on CSS attribute selectors and
this other SO answer.

Select all elements whose name starts with a specific string in CSS

Nope, there is no CSS selector like "wildcard elements" to retrieve elements based on a partial element name.

You can:

A) Use class-names or any other attributes, since element attributes can be accessed using selectors with regular expressions. (As in your question.)

my-element[my-attribute] { … }

B) Use a CSS pre-processor like SCSS to generate a list of such element names:

@for $i from 1 through 3 {
  my-element-#{$i} {
    background-color: red;
  }
}

C) Or just write them one after another in the CSS, delimited by a comma: (This is the same as writing each rule independently as in your question.)

my-element-1,
my-element-2,
my-element-3 {
    background-color: red;
}

Get all items that start with class name

getElementsByClassName only matches on classes, not bits of classes. You can't pass a regular expression to it (well, you can, but it will be type converted to a string, which is unhelpful).

The best approach is to use multiple classes…

<div class="page page1">

i.e. This div is a page, it is also a page1.

Then you can simply document.getElementsByClassName('page').

Failing that, you can look to querySelector and a substring matching attribute selector:

document.querySelectorAll("[class^=page]")

… but that will only work if pageSomething is the first listed class name in the class attribute.

document.querySelectorAll("[class*=page]")

… but that will match class attributes which mention "page" and not just those with classes which start with "page" (i.e. it will match class="not-page".

That said, you could use the last approach and then loop over .classList to confirm if the element should match.

var potentials = document.querySelectorAll("[class*=page]");console.log(potentials.length);elementLoop:  for (var i = 0; i < potentials.length; i++) {    var potential = potentials[i];    console.log(potential);    classLoop:      for (var j = 0; j < potential.classList.length; j++) {        if (potential.classList[j].match(/^page/)) {          console.log("yes");          potential.style.background = "green";          continue elementLoop;        }      }    console.log("no");    potential.style.background = "red";  }

<div class="page">Yes</div><div class="notpage">No</div><div class="some page">Yes</div><div class="pageXXX">Yes</div><div class="page1">Yes</div><div class="some">Unmatched entirely</div>

[class^="path_from"][class*="_6"] {  background: blue;}

<div class='path_from_5_to_6'>DIV</div><div class='_6'>DIV</div><div class='path_from_6_to_5'>DIV</div><div class='path_from_3_to_2'>DIV</div>

.element[class^='icon-'],
.element[class*=' icon-'] {
  ...
}

$("div[class^='apple-'],div[class*=' apple-']")