5

https://tailwindcss.com/docs/responsive-design

に レスポンシブ対応のために

md:w-32 lg:w-48

という プレフィックス: という書き方がありますが、クラス名に:は許可されているのでしょうか?

疑似要素のbeforeなどでhoge::beforeなどの書き方があるので、衝突してしまってできなさそうな気もするのですが、使われている以上できそうな気もします。

はっきりしたドキュメントが見つけられず質問しました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .foo:bar {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="foo:bar">
        a
    </div>
</body>
</html>

実際に書いてみた結果は、CSSが効いてないようです。

1 件の回答 1

5

: 使えます。セレクタ中に書く場合は .foo\:bar のようにエスケープします。

仕様書は下記4つでしょうか。
https://drafts.csswg.org/selectors/
https://drafts.csswg.org/css-syntax-3/
https://html.spec.whatwg.org/multipage/
https://dom.spec.whatwg.org/

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。