Attribute begin with selector not working

Issue

The div[class^="kooy-"] not working. At the same time div[class^="kooy"] gives the result as expected.

div {
  padding: 10px;
  border: 1px solid skyblue;
  margin-bottom: 10px;
}
div[class^="kooy-"] {
  background-color: tomato;
  color: white;
}

<div class="kooy kooy-tomato">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod a, nihil culpa rerum vero esse facilis sint voluptatem eius. Placeat, repudiandae, accusantium. Tempora, tempore ea pariatur molestias culpa quia id.</div>

<div class="kooy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, eius illum. Adipisci pariatur, harum soluta inventore nihil cupiditate dolores ab cum ullam fugit amet, quae provident fuga ea dolorem nobis.</div>

Solution

If you switch your classes round it seems to work:

<div class="kooy-tomato kooy">

It seems that div[class^="kooy-"] is only able to find the first class and does not look for a second class on an element like a <div> as the ^ only looks at the first item within the attribute

Here is a fiddle

How ever if you try div[class*="kooy-"] The * Looks at what is contained within the attribure

Here is a fiddle

If you want to know a bit more about the CSS attribure selector

Answered By - Andrew