Учитываются ли имена классов в CSS-селекторах?

Я постоянно читаю, что CSS не чувствителен к регистру, но у меня есть этот селектор

.holiday-type.Selfcatering

который, когда я использую в своем HTML, вот так, подбирается

<div class="holiday-type Selfcatering">

Если я изменил вышеприведенный селектор, как этот

.holiday-type.Selfcatering

Тогда стиль не подбирается.

Кто-то лжет.

Ответы

Ответ 1

CSS-селекторы обычно нечувствительны к регистру; это включает селекторы класса и идентификатора.

Но имена классов HTML чувствительны к регистру (см. определение атрибута), и это приводит к несоответствию во втором примере. Это не изменилось в HTML5. ¹

Это связано с тем, что регистр чувствительности селекторов зависит от того, что говорит язык документа:

Синтаксис всех селекторов нечувствителен к регистру в пределах диапазона ASCII (т.е. [A-z] и [A-Z] эквивалентны), за исключением частей, которые не контролируются селекторами. Чувствительность к регистру имен элементов языка документа, имен атрибутов и значений атрибутов в селекторах зависит от языка документа.

Таким образом, учитывая элемент HTML с классом Selfcatering, но без класса SelfCatering, селекторы .Selfcatering и [class~="Selfcatering"] будут соответствовать ему, тогда как селекторы .SelfCatering и [class~="SelfCatering"] не будут. ²

Если тип документа определит имена классов как нечувствительные к регистру, то совпадение будет у вас независимо.

¹ _{В режиме причуд для всех браузеров классы и идентификаторы чувствительны к регистру. Это означает, что несоответствующие регистры селекторы всегда будут совпадать. Это поведение одинаково во всех браузерах по устаревшим причинам и упоминается в этой статье.}

² _{Что бы это ни стоило, уровень селекторов 4 содержит предложенный синтаксис для принудительного поиска без учета регистра значений атрибутов с использованием [class~="Selfcatering" i] или [class~="SelfCatering" i]. Оба селектора будут сопоставлять элемент HTML или XHTML либо с классом Selfcatering, либо с классом SelfCatering (или, конечно, с обоими). Однако такого синтаксиса для селекторов класса или идентификатора не существует (пока?), Возможно, потому, что они несут семантику, отличную от обычных селекторов атрибутов (с которой не связана семантика), или из-за того, что сложно создать пригодный для использования синтаксис.}

Ответ 2

Возможно, не ложь, а потребность в разъяснении.

Фактический сам css не чувствителен к регистру.

Например

wiDth:100%;

но имена, они должны быть чувствительны к регистру, чтобы быть уникальными идентификаторами.

Надеюсь, что это поможет.

Ответ 3

В режиме quirks все браузеры ведут себя как без учета регистра при использовании CSS class и id names.

В режиме quirks имена классов CSS и id нечувствительны к регистру. В в стандартном режиме они чувствительны к регистру. (Это также относится к getElementsByClassName.) читайте больше...

Иногда, когда у вас неправильные доктрины, например, ниже, ваш браузер переходит в режим quirks.

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

<!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 Строгий

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

XHTML 1.0 Transitional

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

если ваш CSS class или id names ведет себя case insensitive, проверьте свой doctype.

Ответ 4

CSS не чувствителен к регистру.

Но в HTML5 класс и ID чувствительны к регистру

Итак, свойства CSS, значения, имена псевдоклассов, имена псевдоэлементов, имена элементов не чувствительны к регистру

И класс CSS, id, URL, семейства шрифтов чувствительны к регистру.

примечание: в режиме html quirks css нечувствителен к регистру даже для идентификатора и класса (если вы удалите объявление 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>