Geek Answers Handbook

The attribute begins with the selector not working.

div[class^="kooy-"] does not work. 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>
+6
source share
2 answers

If you switch your classes around, it seems to work:

 <div class="kooy-tomato kooy">

It seems that div[class^="kooy-"] can only find the first class and does not look for the second class for an element of type <div> , since ^ looks only at the first element of the attribute

Here is the fiddle

Whatever it was, if you try div[class*="kooy-"] * See what is contained in the attribution

Here is the fiddle

If you want to know a little more about the CSS attribute selector

+3
source

This does not work because class="kooy kooy-tomato" does not start with kooy- starts with kooy . Instead, you can use the selector attribute or [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>
+7
source

More articles:


All Articles