WEBOPIXEL

CSSのID・クラス名の頭文字に数字を使用する方法

Posted: 2015.08.11 / Category: HTML&CSS 

CSSは普通だとidやclassの頭文字に数字は使用できないのですが、使用する方法をご紹介します。

Sponsored Link

使用方法

HTMLのクラス名に単純に「3」と付けてみましょう。

<p class="3">テスト</p>

CSSでは文字コードを指定すれば使用できまるんですね。

.\33 {
    color: red;
}

あとは属性セレクタを使用することでも同じことができます。

[class="3"] {
    color: red;
}

その他使用例

直接50%とか指定してみたり。

<div class="50%">テスト</div>
<div class="50%">テスト</div>
.\35 0\% {
    width: 50%;
}

文字コードを指定すればこんな感じで括弧も使えます。

<div class="50% 100%(md)">テスト</div>
<div class="50% 100%(md)">テスト</div>
.\31 00\%\(md\) {
	width: 100%;
}

HTMLではクールに書けますが、CSSだと何がなんだかわからないですね。

下記サイトで文字コードに変換するツールや一覧で確認できます。

CSS content and Special Characters
CSS escapes

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。