Pick up classes with - (hyphen)

Question

Good morning.

Today I came across a problem I’m not sure how to solve.

A promotion system generates some classes for some elements on my page, the problem is the way it generates, it puts traces/hyphens in the class name and it seems that it is impossible to manipulate.

It’s a promotional system, where my marketing team creates the promotions. The names of the promotions were created for example, with a name similar to that: "5 shirts for 99".

When the system generates the flags in the products that are part of this promotion, it creates an element p with class 5-shirts-by-99, being like this:

<p class="5-camisas-por-99">5 camisas por 99</p>

The problem is that I need to style this by taking the class, but the css doesn’t seem to manipulate classes that have strokes.

.5-camisas-por-99 {
  padding: 10px;
  background-color: black;
  color: #FFF;
  border-radius: 5px;
}

<p class="5-camisas-por-99">5 camisas por 99</p>

I also tried to do so, with the selector = but no results:

p[class^="camisas"] {
  background-color: black;
  padding: 10px;
  border-radius: 5px;
  color: #FFF;
}

<p class="5-camisas-por-99">5 camisas por 99</p>

Someone would have some solution to manipulate it?

OBS:

I don’t own the backend, I can’t change the system.

The promotions created need to be with the names like this, the marketing team decided this, I can not change. I really need to manipulate this class.

Answer 1

Your problem is that CSS does not accept numbers as class name, type .1 { meu css }, but if you put .n1 { meu css } or .n-1 { meu css } it would work.

In any case you can still select by attr this way [class="5-camisas-por-99"]{ meu css } that will work as you can see below

[class="5-camisas-por-99"]{
  padding: 10px;
  background-color: black;
  color: #FFF;
  border-radius: 5px;
}

<p class="5-camisas-por-99">5 camisas por 99</p>

OBS: That way you wrote p[class^="camisas"] using the ^ would only work if the first string of the class name was the word camisa, but it is not, in case it is the number 5, it doesn’t work... or if it was p[class*="camisas"] using a * and not a ^ function also!

Here’s a full list that will help you understand css selectors by attribute https://developer.mozilla.org/en-US/docs/Web/CSS/Seletor_de_atributos