O que significa .container.\31 25\25 em CSS?

Em CSS, os identificadores podem conter caracteres especiais, como a barra invertida (). O caractere de barra invertida tem finalidades diferentes em CSS, dependendo do contexto.

Caracteres de escape

Dentro de uma string, uma barra invertida seguida por uma nova linha é ignorada. Fora de uma string, uma barra invertida seguida por uma nova linha representa a si mesma.

Escapando caracteres especiais

Uma barra invertida pode ser usada para escapar de caracteres CSS especiais, fazendo-os perder seu especial significado. Por exemplo, uma aspa dupla (") dentro de uma string pode ser escapada como \".

Referências de caracteres Unicode

Uma barra invertida seguida por até seis dígitos hexadecimais ( 0-9a-fA-F) representa o caractere ISO 10646 com esse número. Espaço em branco ou um dígito hexadecimal adicional é usado para encerrar a referência.

No código fornecido, a barra invertida () está sendo usada para representar um valor percentual no nome da classe do elemento .container:

.container.\31 25\25 { /* 125% */
  width: 100%;
}

Os caracteres especiais \31, 25 e \25 representam os números hexadecimais dos caracteres "1", "%" e "%", respectivamente. Portanto, este código é equivalente a:

.container[class ~= "125%"] { /* 125% */
  width: 100%;
}

Este seletor de classe corresponde a qualquer elemento com uma classe contendo "125%". O cálculo da largura do elemento é o seguinte:

width = (containers * 125%)