2
<html>
<head>
<style>
#1fineday {
    color:yellow;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<div class="intro">
  <p id="1fineday">Hello World</p> 
</div>
</body>
</html>

Shouldn't "Hello World" be yellow? I don't understand why internal CSS styling I wrote doesn't apply. The ID is 1fineday. I must be overlooking something.

TomCold
  • 83
  • 6
Kayla Scott
  • 23
  • 2
  • You could read rules for ID naming conventions: https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html. I think your problem is that starts with a number. – Shidersz Oct 09 '18 at 02:05
  • 1
    Starting with a number is okay, but if you do, you can't use the `#` in the CSS selector. – Ray Toal Oct 09 '18 at 02:19

2 Answers2

2

Because of naming convention, your id cannot start with a number

<html>

<head>
  <style>
    #fineday {
      color: yellow;
    }
  </style>
</head>

<body>
  <h1>Welcome</h1>
  <div class="intro">
    <p id="fineday">Hello World</p>
  </div>
</body>

</html>

Remove the number 1 and it will work

For reference:

W3Schools: https://www.w3schools.com/css/css_syntax.asp

CSS-Tricks: https://css-tricks.com/ids-cannot-start-with-a-number/

You Nguyen
  • 9,961
  • 4
  • 26
  • 52
  • Actually [the specification of the id attribute](https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute) says: "There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc." – Ray Toal Oct 09 '18 at 01:57
  • I also find some interesting articles, from W3Schools https://www.w3schools.com/css/css_syntax.asp and from CSS-Tricks https://css-tricks.com/ids-cannot-start-with-a-number/ – You Nguyen Oct 09 '18 at 02:03
  • 1
    Well with all due respect just because a couple of bloggers say "An id name cannot start with a number" doesn't make it true. :) I think we can all agree that an id _can_ start with a number. But if it does start with a number, then you cannot use the shortcut syntax `#x` -- you have to use the regular form `[id="x"]`. It sounds like a nitpick but really it's not. Cheers. :) – Ray Toal Oct 09 '18 at 02:26
  • Well then, I come up with an conclusion: An id name can start with a number, however, in case an id name starts with a number, we cannot select it using `#id_value` syntax, we have to use the `[id=id_value]` syntax, they are equivalent according to this article: https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors – You Nguyen Oct 09 '18 at 02:31
1

There's a technicality in the way that you write CSS selectors using the # character. You can always write the selector to use the attribute selector

[id="1fineday"] {
    color:yellow;
}

and you'll see yellow text.

You can't write #1fineday in the selector, because, as the official CSS Selector Specification says:

An ID-typed attribute of a document language allows authors to assign an identifier to one element instance in the document tree. An ID selector contains a "number sign" (U+0023, #) immediately followed by the ID value, which must be an CSS identifiers. An ID selector represents an element instance that has an identifier that matches the identifier in the ID selector.

The syntax for CSS identifiers is given in the official spec with these words:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Therefore if you still want to use the #, you'll have to use the escape code for the number 1:

#\31 fineday {
    color:yellow;
}

Thanks to misorude in the comments for pointing the latter trick out, and noting that the specificity rules are different between the id and attribute selectors.

Ray Toal
  • 86,166
  • 18
  • 182
  • 232
  • This should be the correct answer. I didn't know ID could start with a number, but even it did, then this is the correct way of using CSS for an ID that starts with a number. Thanks for sharing this!! – Gosi Oct 09 '18 at 02:05
  • 1
    pretty cool, however, the way we're using is somehow become attribute selector rather than id selector :) for short, we could write: [id="1fineday"] without the need of `p` tag selector – You Nguyen Oct 09 '18 at 02:08
  • Yes, that's true, the `p` is not required. – Ray Toal Oct 09 '18 at 02:18
  • 1
    _“you can't use the # shortcut in CSS.”_ - yes you can, as https://css-tricks.com/ids-cannot-start-with-a-number/ mentioned in the other answer shows. And this is kinda important/ worth mentioning, because with the attribute selector you get a different specificity than with the actual id selector. – misorude Oct 09 '18 at 07:10
  • Wow, thanks, I did not know that. I will edit the answer. – Ray Toal Oct 09 '18 at 13:39