Apakah nama-nama kelas dalam selektor pemilih CSS sensitif?

229

Saya terus membaca di mana-mana bahwa CSS tidak peka terhadap huruf besar-kecil, tetapi saya memiliki pemilih ini

.holiday-type.Selfcatering

yang ketika saya gunakan dalam HTML saya, seperti ini, diambil

<div class="holiday-type Selfcatering">

Jika saya mengubah pemilih di atas seperti ini

.holiday-type.SelfCatering

Maka gaya tidak dijemput.

Seseorang berbohong.

html css css-selectors Sachin Kainth
sumber
55
Moral dari cerita ini hanya menjadi case-sensitive sepanjang waktu - jangan bangkit bolak-balik mau tak mau. Anda akan menemukan kode Anda lebih mudah dibaca dan siapa pun yang mengambil sisa makanan Anda akan menghargainya.
kingdango
3
Saya memperlakukan sebagai case sensitif mulai sekarang. class = "Price" tidak berfungsi, class = "price" berfungsi, jadi dalam arti praktis setiap hari mereka sensitif huruf.
Tino Mclaren
4
Lihat "Matriks kasus" lengkap , tentang sensitivitas huruf dalam nilai properti dan penyeleksi .
Peter Krauss
5
Lucunya, saya secara konsisten menggunakan camelCase dalam nama kelas saya, tetapi CSS tidak mengambilnya di tampilan web iOS. Jadi moralnya adalah, selalu gunakan garis putus-putus untuk kelas.
EpicPandaForce

Jawaban:

242

Selektor CSS umumnya tidak sensitif huruf besar-kecil; ini termasuk pemilih kelas dan ID.

Tapi nama kelas HTML adalah case-sensitive (lihat definisi atribut), dan bahwa ini menyebabkan ketidakcocokan dalam contoh kedua Anda. Ini belum berubah dalam HTML5 . 1

Ini karena sensitivitas selektor tergantung pada apa yang dikatakan bahasa dokumen :

Semua sintaks penyeleksi tidak peka huruf besar kecil dalam rentang ASCII (yaitu [az] dan [AZ] adalah setara), kecuali untuk bagian yang tidak di bawah kendali penyeleksi. Sensitivitas kasus dari nama elemen bahasa dokumen, nama atribut, dan nilai atribut dalam penyeleksi tergantung pada bahasa dokumen.

Jadi, diberikan elemen HTML dengan Selfcateringkelas tetapi tanpa SelfCateringkelas, penyeleksi .Selfcateringdan [class~="Selfcatering"]akan mencocokkannya, sedangkan pemilih .SelfCateringdan [class~="SelfCatering"]tidak akan. 2

Jika jenis dokumen mendefinisikan nama kelas sebagai tidak peka huruf besar-kecil, maka Anda akan memiliki kecocokan apa pun.

1 Dalam mode quirks untuk semua browser, kelas dan ID tidak peka huruf besar-kecil. Ini berarti pemilih yang tidak cocok dengan huruf besar akan selalu cocok. Perilaku ini konsisten di semua browser untuk alasan warisan, dan disebutkan dalam artikel ini .

2 Untuk apa nilainya, Penyeleksi level 4 berisi sintaks yang diusulkan untuk memaksa pencarian case-sensitive pada nilai atribut menggunakan [class~="Selfcatering" i]atau [class~="SelfCatering" i]. Kedua penyeleksi akan mencocokkan elemen HTML atau XHTML dengan Selfcateringkelas atau SelfCateringkelas (atau, tentu saja, keduanya). Namun tidak ada sintaks untuk penyeleksi kelas atau ID (belum?), Mungkin karena mereka membawa semantik yang berbeda dari penyeleksi atribut biasa (yang tidak memiliki semantik yang terkait dengannya), atau karena sulit untuk menghasilkan sintaks yang dapat digunakan.

BoltClock
sumber
7
Wah ini justru kebalikan dari apa yang ditunjukkan tes jsfiddle saya . Di sana divdan DIVpemilih keduanya cocok dengan <div>, tetapi id dan pemilih nama kelas harus peka huruf besar-kecil. Kecuali saya salah mengerti jawaban Anda?
Roddy of the Frozen Peas
21
@Roddy dari Frozen Peas: Itu karena kelas HTML dan ID bersifat case-sensitive, sedangkan nama tag tidak. Saya secara khusus meninggalkan nama tag dari jawaban saya karena alasan ini. (Ngomong-ngomong, nama tag hanya peka huruf besar kecil di XHTML yang sebenarnya, terlepas dari jenis dokumennya - jika jsFiddle bisa membiarkan Anda memaksa halaman untuk dijadikan aplikasi / xhtml + xml, DIVpemilih tidak akan lagi cocok.)
BoltClock
2
@BoltClock Apa yang dimaksud dengan "bahasa dokumen" di sini?
Geek
4
@ Geek: "bahasa dokumen" mengacu pada bahasa apa pun yang Anda terapkan CSS, paling umum HTML, XHTML atau XML. Anda dapat menemukan definisi di sini .
BoltClock
2
Apakah ada orang lain yang benar-benar bingung? Jika pemilih yang terjadi di sensitif, maka dengan definisi, tidak bahwa kelas CSS make ( dalam kaitannya dengan pemilih memilih mereka ) kasus di sensitive, juga? Dengan kata lain, dalam kaitannya dengan satu sama lain (kelas dan penyeleksi CSS) - jika ada yang peka terhadap huruf besar-kecil, maka itu berarti keduanya sama. Dengan kata lain belum - jika pemilih saya .selfcateringdan penyeleksi adalah case sensitif, mengapa harus peduli apakah kelas adalah Selfcateringatau SelfCateringatau sElfcAtErInG? Apa yang saya lewatkan?
jbyrd
62

Mungkin bukan bohong, tapi perlu klarifikasi.

Css aktual itu sendiri tidak peka terhadap huruf besar-kecil.

Sebagai contoh

wiDth:100%;

tetapi namanya, mereka harus peka terhadap huruf besar untuk menjadi pengidentifikasi unik.

Semoga itu bisa membantu.

Jack Stone
sumber
20

Dalam mode quirks, semua browser berperilaku seperti case-insensitive ketika menggunakan kelas CSS dan nama id.

Dalam mode quirks, kelas CSS dan nama id tidak sensitif huruf. Dalam mode standar mereka peka huruf besar-kecil. (Ini juga berlaku untuk getElementsByClassName.) Baca lebih lanjut.

Terkadang ketika Anda memiliki DOCTYPE salah seperti di bawah ini, browser Anda masuk dalam mode quirks.

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

Anda harus menggunakan DOCTYPE standar

HTML 5

<!DOCTYPE html>

HTML 4.01 Ketat

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

HTML 4.01 Transisi

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

HTML 4.01 Frameset

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

XHTML 1.0 Ketat

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

XHTML 1.0 Transisi

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

XHTML 1.0 Frameset

<!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">

jika kelas CSS atau nama id Anda berperilaku tidak peka terhadap huruf besar-kecil, harap periksa doctype Anda.

Mohamad Shiralizadeh
sumber
3

CSS adalah case-sensitive.

Tetapi dalam HTML5 kelas dan ID peka huruf besar-kecil

Jadi, properti CSS, nilai, nama kelas pseudo, nama elemen pseudo, nama elemen peka huruf besar kecil

Dan kelas CSS, id, url, font-family adalah case-sensitive.

Catatan: dalam mode quirks html css tidak sensitif huruf besar bahkan untuk ID dan kelas (jika Anda menghapus deklarasi doctype)

Contoh pada 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>
Menukar
sumber