Muhammed Athimannil Muhammed Athimannil - 10 months ago 35
CSS Question

Attribute begin with selector not working


not working. At the same time
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>


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