Css target just class name starts with and Ends with string

Question

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?

Without JavaScript you can’t, so far as I know. But I’d be interested to see if that’s changed. Incidentally is JavaScript an acceptable alternative, or do you need it to be pure CSS, even if that’s not possible? — David Thomas
– David Thomas, Commented Jan 18, 2019 at 14:57
I would love to get a pure css solution and I wish there should be some tricky way to get this. Some Css developer should have thot about this — Sujay U N
– Sujay U N, Commented Jan 18, 2019 at 15:02
please read tag description before using .. the class tag has nothing to do with CSS class (it's written in uppercase) — Temani Afif
– Temani Afif, Commented Jan 18, 2019 at 15:06
Not sure if I understood your question exactly, please let me know if I was able to help you with my answer. Thanks in advance! — GibboK
– GibboK, Commented Jan 18, 2019 at 15:15
@Temani: "at some degree it can be possible..." - yes, but it's an ugly hack at best, horribly fragile and verbose. While I would prefer to be able to select elements using attribute-like selectors (begins-with, ends-with, etc) currently it's not reliable without using JavaScript (and there's nothing currently in the Selectors Level 4 spec which suggests that's likely to change/improve. — David Thomas
– David Thomas, Commented Jan 18, 2019 at 23:42

Temani Afif · Accepted Answer · 2019-01-18 22:04:25Z

Basically we can have 4 situations:

Having only the needed class:

<div class="Nam-StdCss-*-Cls"></div>

Having the needed class at the start

<div class="Nam-StdCss-*-Cls ... more-class"></div>

Having the needed class at the end

<div class="more-class ... Nam-StdCss-*-Cls"></div>

Having the needed class in the middle

<div class="more-class ... Nam-StdCss-*-Cls ... more-class"></div>

You can write a selector for each one like below:

[class^="Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:red;
}
/*note the space after the class name---------v*/
[class^="Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:blue;
}
/*       v---note the space before the class name*/
[class*=" Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:green;
}
/*       v------space before and after---------v */
[class*=" Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:purple;
}

<div class="Nam-StdCss-Cls">aaa</div>
<div class="Nam-StdCss-anything-Cls">aaa</div>
<div class="Nam-StdCss-Cls ... more-class">bbb</div>
<div class="Nam-StdCss-other-Cls more-class ...">bbb</div>
<div class="more-class ... Nam-StdCss-Cls">ccc</div>
<div class="more-class ... Nam-StdCss-radius-Cls">ccc</div>
<div class="more-class ... Nam-StdCss-Cls ... more-class">ddd</div>
<div class="more-class ... Nam-StdCss-radius-Cls ... more-class">ddd</div>
<br>
<div class="more-class  more-class">not !!</div>
<div class="more-class Nam-StdCss  more-class">not !!</div>
<div class="Nam-StdCss  more-class">not !!</div>

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.

[class^="Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:red;
}
[class^="Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:blue;
}
[class*=" Nam-"][class*="StdCss-"][class$="-Cls"]{
  color:green;
}
[class*=" Nam-"][class*="StdCss-"][class*="-Cls "]{
  color:purple;
}

<div class="Nam- StdCss- -Cls">aaa</div>

<div class="StdCss- Nam- -Cls">aaa</div>

<div class="-Cls StdCss- Nam-">aaa</div>

Collectives™ on Stack Overflow

Css target just class name starts with and Ends with string

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related