クラス名に括弧が付いたクラスを利用して、スタイルを設定したい。

Question

phpを使って動的にクラス名を付与して、HTML要素を吐き出すプログラムがあります。
動的にクラス名を設定しているためか、クラス名に括弧が付く場合があります。
下記のような感じです。

<p class="hoge(">

この、クラス名に括弧が付いた後の要素に対してCSSを設定したいと考えています。

.hoge( ~ * {
  margin: 0;
}

しかし、上記CSSを書くとIDEが.c(の部分に下記のエラーが表示します。

{ expectedcss(css-lcurlyexpected)

---

次にJavascriptで操作を試みようと思い、下記のように要素を取得しようとしました。

$(function () {
  const hogeKakko = $(".hoge(");
  console.log(hogeKakko);
});

結果、下記のエラーメッセージがコンソールに表示されました。

Syntax error, unrecognized expression: .hoge(
    at Function.oe.error

---

どうにかして、クラス名に括弧が付いた要素にCSSを設定したり、要素を取得したりする方法はないでしょうか。
よろしくお願いいたします。

Answer 1

セレクタ中では、- と _ 以外のASCII記号はエスケープする必要があります。

.hoge(

Answer 2

[class="hoge("] ~ *,
[class^="hoge( "] ~ *,
[class$=" hoge("] ~ *,
[class*=" hoge( "] ~ *
{
color:red;
}

Answer 3

そもそもクラス名に使える文字列ではないと思います。
言語仕様部分なので、あわせた命名にするしかありません。