0

From this question, as I understand, css selectors are case-insensitive but HTML attributes (class names) are case sensitive thus IMHO, .exampleshould be overridden by .Examplecss selector but that does not happen. <div class="example">color is still red and not blue as I thought it would since css selectors are case-insensitive.

.example {
  color: red;
}

.Example {
  color: blue;
}
<div class="example">
  example
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
appu
  • 471
  • 1
  • 8
  • 26
  • it says `But HTML class names are case-sensitive (see the attribute definition), and that's causing a mismatch in your second example. This has not changed in HTML5.1` so .. – treyBake Dec 21 '18 at 13:32
  • @golddragon007 he already include that link in the question .. – Temani Afif Dec 21 '18 at 13:33
  • From the linked question, the accepted answer says `CSS selectors are generally case-insensitive... But HTML class names are case-sensitive`. As you can see in my code, the html class name `class="example"`is lowercase but css has 2 classes `.example` & `.Example` which should select `div.example"` hence it's color should be blue since `.Example` overrides the color set by `.example` – appu Dec 21 '18 at 13:36
  • 3
    As I already stated in my answer, and @treyBake quotes, HTML class names being case-sensitive is why your second rule does not match - because "example" and "Example" are not the same - and therefore there is nothing to override. – BoltClock Dec 21 '18 at 13:55
  • `class` and `id` are case-sensitive. `tags` are not. so `p` or `P` in css will select `

    ` html element. By saying `HTML class names are case-sensitive` it is implied that this is the case when you try to select them in CSS. Not that you are not allowed to use `ExAmPle` as a class name ( it's not recommended though )

     – Mihai T Dec 21 '18 at 14:23
  • Closing as a dupe as BoltClock's answer in the target explains this. – TylerH Dec 21 '18 at 16:28

2 Answers2

4

You are absolutely right! CSS is indeed primarily case-insensitive.

But HTML 4.01 defines class and id names to be case-sensitive and this has not changed in HTML5.

All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification.

Source

Arjan
  • 599
  • 5
  • 23
0

Basically 

.example {}

and 

.Example {}

are two different things now, so it is better to avoid the same names to classes and is a good coding practice not to name two classes as same.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Shadow Walker
  • 206
  • 1
  • 2
  • 13