8

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>
Mo.
  • 26,306
  • 36
  • 159
  • 225

2 Answers2

9

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

Andrew
  • 1,850
  • 14
  • 18
9

It doesn't work because class="kooy kooy-tomato" doesn't start with kooy- but with kooy . Instead, you can use the attribute contains selector ([attr*=value]).

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>
Smart Manoj
  • 5,230
  • 4
  • 34
  • 59
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • But still I don't understand **why** begin with not working ! – Mo. Aug 02 '16 at 13:13
  • 2
    Begin is working. But the value doesn't begin with "kooy-". It begins with "kooy". The answer modifies the selector from matching a value that begins (`^`) to contains (`*`). https://www.w3.org/TR/css3-selectors/#selectors – Michael Benjamin Aug 02 '16 at 13:16
  • 1
    Exactly as Michael said, if you change order of classes then it will work https://jsfiddle.net/Lg0wyt9u/1084/ – Nenad Vracar Aug 02 '16 at 13:19
  • You are using attribute selector so you need to look at class as attribute and in your case it doesn't start with `kooy-`. – Nenad Vracar Aug 02 '16 at 13:24