Css target просто имя класса начинается с и заканчивается строкой

Question

Я хочу создать определенный стандартный код CSS для нашей компании, и в качестве брендинга я хочу, чтобы все мои имена классов начинались с названия моей компании - и заканчивались на -Cls

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

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

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

Также я хочу разрешить пользователям использовать их собственные CSS *

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

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

Я пытался сделать, и это не позволяет войти в пользовательский класс, как меню.

[class^="Nam-"][class*="StdCss-1"][class$="-Cls"]{}

Я пытался, и это не проверка начального и конечного имени класса

 [class*="Nam-"][class*="StdCss-1"][class$=*-Cls"]{}

Итак, я хочу знать, как мы можем просто проверить начало и конец имени класса и не всей строки ?

Answer 1

В основном мы можем иметь 4 ситуации:

Имея только необходимый класс:

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

Наличие в начале необходимого класса

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

Наличие нужного класса в конце

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

Наличие нужного класса в середине

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

Вы можете написать селектор для каждого, как показано ниже:

[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>

Вам следует обратить внимание, так как это может быть нацелено на ненужный элемент в некоторых особых случаях, что связано с тем, что порядок не имеет значения для классов.

[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>