How to define css selector class prefix with SASS

class, css, sass, selector

Solution

You can use the following construct:

[class^="name"]{ 
   &[class$="-1"]{
       padding: 10px;
   }
}

For reference check out the W3C Selectors section.

EDIT

CSS Version on JSFiddle

As Beterraba mentioned this will also match `.nameother-1`. To avoid this use the following:

[class|="name"]{ 
   &[class$="-1"]{
       padding: 10px;
   }
}

If you e.g. want to match `.name-1-2` you could do the following:

[class|="name"]{ 
   color: red;

   &[class*="-1"]{
       padding: 10px;
       color: green;

       &[class$="-2"]{
           padding: 30px;
           color: yellow;
       }  

   } 
}

But this would also match `.name-15-2`. To avoid that you need to make something like this:

[class|="name"]{ 
    color: red;

   &[class$="-1"]{
       padding: 10px;
       color: green;
   } 

   &[class$="-1-2"]{
       padding: 30px;
       color: yellow;
   }     
}

But this would also match `name-5-1-2`. And so on.. I think the list is endless. Anyway it's getting very unreadable. I don't recommend you to do so. Why not simply targeting these elements directly?

Problem

Is there any posible to write this construction? ``` [class^="name"]{ &[class*="-1"]{ padding: 10px; } } ``` To have this solution ``` .name-1 ``` but only for this type of class prefix. For example if i write: ``` <span class="name-1"></span> ``` this will be work, but when i write ``` <span class="othervalue-1"></span> ``` there will be nothing to show.

Original source