CSSセレクターのクラス名は大文字と小文字を区別しますか？

229

CSSは大文字と小文字を区別しないということを随時読み続けますが、このセレクターがあります。

.holiday-type.Selfcatering

これを私のHTMLで使用すると、このようにピックアップされます

<div class="holiday-type Selfcatering">

上記のセレクターをこのように変更すると

.holiday-type.SelfCatering

その後、スタイルはピックアップされません。

誰かが嘘をついている。

html css css-selectors

— サチン・ケインツ
ソース

55

この話の教訓は、常に大文字と小文字を区別するだけです-自由に前後にバウンスしないでください。コードが読みやすくなり、残り物を拾う人はそれを高く評価します。

— kingdango 2012

3

今後は大文字と小文字を区別するものとして扱います。class = "Price"が機能せず、class = "price"が機能するため、実用的には、大文字と小文字が区別されます。

— Tino Mclaren、2014

4

参照してください。完全な「事例行列」、で大文字と小文字の区別についてのプロパティの値とセレクタを。

— Peter Krauss、

5

おかしいことに、私はクラス名にキャメルケースを一貫して使用していましたが、CSSはiOSのWebビューでそれを認識しませんでした。したがって、道徳は、常にクラスのダッシュを使用します。

— EpicPandaForce 2015年

242

CSSセレクターは通常、大文字と小文字を区別しません。これには、クラスおよびIDセレクターが含まれます。

ただし、HTMLクラス名では大文字と小文字が区別され（属性の定義を参照）、それが2番目の例で不一致を引き起こしています。これはHTML5では変更されていません。¹

これは、セレクターの大文字と小文字の区別が、ドキュメント言語の発言に依存しているためです。

セレクターの制御下にない部分を除いて、すべてのセレクター構文はASCII範囲内で大文字と小文字を区別しません（つまり、[az]と[AZ]は同等です）。セレクターのドキュメント言語要素名、属性名、および属性値の大文字と小文字の区別は、ドキュメント言語によって異なります。

だから、とHTML要素を与えられSelfcateringたクラスが、なくてSelfCateringセレクタ、クラス.Selfcateringと[class~="Selfcatering"]それにマッチします、セレクタしばらく .SelfCateringして[class~="SelfCatering"]ないでしょう。²

ドキュメントタイプでクラス名が大文字と小文字を区別しないと定義されている場合は、関係なく一致します。

¹ _{すべてのブラウザーの互換モードでは、クラスとIDは大文字と小文字を区別しません。つまり、大文字と小文字が一致しないセレクターは常に一致します。この動作は、従来の理由によりすべてのブラウザで一貫しており、この記事で説明されています。}

² _{価値があるのは、セレクターレベル4に、[class~="Selfcatering" i]またはを使用して属性値の大文字と小文字を区別しない検索を強制するための提案された構文が含まれていること[class~="SelfCatering" i]です。どちらのセレクターも、HTMLまたはXHTML要素をSelfcateringクラスまたはSelfCateringクラス（または、もちろん両方）と一致させます。ただし、クラスまたはIDセレクターにはそのような構文はありません（まだ？）。これは、通常の属性セレクター（セマンティクスが関連付けられていない）とは異なるセマンティクスを持っているためか、使用可能な構文を考え出すことが難しいためです。}

— ボルトクロック
ソース

7

これは、私のjsfiddleテストが示していることとは正反対です。そこではdiv、DIVセレクターは両方ともと一致しました<div>が、IDとクラス名のセレクターは大文字と小文字を区別する必要がありました。あなたの答えを誤解しない限り？

— 冷凍エンドウ豆のロディ

21

@Frozen Peasの@Roddy：HTMLのクラスとIDでは大文字と小文字が区別されますが、タグ名では区別されません。このため、特にタグ名を回答から除外しました。（ちなみに、doctypeに関係なく、タグ名は真のXHTMLでのみ大文字と小文字を区別します-jsFiddleでページをapplication / xhtml + xmlとして強制的に提供できる場合、DIVセレクターは一致しなくなります。）

— BoltClock

2

@BoltClockここで「ドキュメント言語」とはどういう意味ですか？

— オタク2012

4

@Geek：「ドキュメント言語」とは、CSSを適用するすべての言語を指し、最も一般的にはHTML、XHTML、またはXMLです。ここで定義を見つけることができます。

— BoltClock

2

他の誰かが完全に混乱していますか？セレクターが大文字と小文字を区別する場合、定義により、CSSクラスも（セレクターを選択するセレクターに関連して）大文字と小文字を区別しませんか？言い換えると、相互に関連して（CSSクラスとセレクター）、一方が大文字と小文字を区別しない場合は、両方が区別されます。さらに言い換える.selfcateringと、セレクタが大文字で小文字が区別されない場合、クラスがSelfcateringorであるSelfCateringかorであるsElfcAtErInGかを気にする必要があるのはなぜですか。何が欠けていますか？

— jbyrd

62

おそらく嘘ではありませんが、明確にする必要があります。

実際のcss自体は大文字と小文字を区別しません。

例えば

wiDth:100%;

ただし名前は、一意の識別子となるように大文字と小文字を区別する必要があります。

お役に立てば幸いです。

— ジャック・ストーン
ソース

20

互換モードでは、CSSクラス名とID名を使用すると、すべてのブラウザーが大文字と小文字を区別しないように動作します。

互換モードでは、CSSクラスとIDの名前は大文字と小文字が区別されません。標準モードでは、大文字と小文字が区別されます。（これはgetElementsByClassNameにも適用されます。）詳細

以下のような間違ったdoctypeがあると、ブラウザが互換モードになります。

<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>

標準のdoctypeを使用する必要があります

HTML 5

<!DOCTYPE html>

HTML 4.01厳格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01トランジショナル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01フレームセット

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0厳格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0移行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0フレームセット

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

CSSクラスまたはID名の大文字と小文字が区別されない場合は、Doctypeを確認してください。

— モハマド・シラリザデ
ソース

3

CSSは大文字と小文字を区別しません。

ただし、HTML5では、クラスとIDは大文字と小文字が区別されます

したがって、CSSプロパティ、値、疑似クラス名、疑似要素名、要素名は大文字と小文字を区別しません

また、CSSクラス、id、urls、font-familiesでは、大文字と小文字が区別されます。

注：HTML互換モードでは、CSSはIDとクラスであっても大文字と小文字を区別しません（Doctype宣言を削除した場合）

CodePenの例：https ://codepen.io/swapnilPakolu/pen/MWgvQyB?&editable=true#anon-signup

<!DOCTYPE html>
<html>
<head>
<title>CSS case sensitive ?</title>
<style>

P#id
{color:RED;}

p#ID
{font-size:30PX;}

#iD
{BORDER:4px solid blue;}

.class
{text-decoration:underLine;}

.CLASS
{background-color:graY;}

.Class
{font-weight:900;}

#ID::afTeR
{conTent:"colored text";
disPlay:bLock;
color:#fAdAcA;}

.class:hoVeR
{background-color:lightblue;}

</style>
</head>
<body>
<p id="id" class="class">red and underline</p>
<p id="ID" class="CLASS">30px font size and gray background</p>
<p id="iD" class="Class">bold and blue border</p>
</body>
</html>

— スワップ
ソース