Muhammed Athimannil Muhammed Athimannil - 4 months ago 7
CSS Question

Attribute begin with selector not working

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>




Answer

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

Comments