I want to create certain standard css code for our company and as branding, I want to start all my class names with my company name- and end all with -Cls
<div class="Nam-StdCss-Cls"></div>
<div class="Nam-StdCss-Raduis-Cls"></div>
<div class="Nam-StdCss-Border-Cls"></div>
Also I want to allow users to use their custom css as well
<div class="Nam-StdCss-Cls menu"></div>
<div class="menu Nam-StdCss-Cls"></div>
I tried to do and This is not allowing to enter the custom class like menu.
[class^="Nam-"][class*="StdCss-1"][class$="-Cls"]{}
I tried and this is not checking starting and ending class name
[class*="Nam-"][class*="StdCss-1"][class$=*-Cls"]{}
So I want to know, How we can just check starting and ending of the class name and not the entire string?
Basically we can have 4 situations:
Having only the needed class:
Having the needed class at the start
Having the needed class at the end
Having the needed class in the middle
You can write a selector for each one like below:
You should pay attention as this may target non needed element in some particular cases which is due to the fact that the order doesn't matter for classes.