6

I have always thought that the CSS input[type] selector needs quotes to specify the type, e.g.:

input[type="email"], input[type="text"]

Now I downloaded a couple of styled checkboxes and the CSS reports:

input[type=checkbox] {
     display:none;
}

Are the quotes needed or it's just the same thing with or without them?

Perocat
  • 1,481
  • 7
  • 25
  • 48

1 Answers1

10

No, quotes are not needed as per the CSS grammar rules.

The rules are a bit confusing, but here is the relevant production. Note how the value can be an identifier (unquoted for word-like values) or a quoted string.

attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ]? ']'

And the relevant tokens:

ident       -?{nmstart}{nmchar}*
nmstart     [_a-z]|{nonascii}|{escape}
nmchar      [_a-z0-9-]|{nonascii}|{escape}

string      {string1}|{string2}
string1     \"([^\n\r\f\\"]|\\{nl}|{escape})*\"
string2     \'([^\n\r\f\\']|\\{nl}|{escape})*\'

The astute reader might have noticed that "nonascii" is allowed in an identifier character: outside of the ASCII plane, all Unicode characters are technically allowed in an identifier. From a practical perspective, however, I recommend quotes in anything but "trivial" cases.

user2864740
  • 60,010
  • 15
  • 145
  • 220
  • So what exactly is the `S*`? It is funny, they state it is written in Flex notation, but on the link, they do not link to the notation, arrgh. ;) – loveNoHate Feb 04 '14 at 22:28
  • @dollarvar It refers to the `s` token below: `[ \t\r\n\f]+` (basically, ASCII white-space). So `S*` means "zero or more spaces". – user2864740 Feb 04 '14 at 22:29
  • Haha, actually it refers to `s|\\0{0,4}(53|73)(\r\n|[ \t\r\n\f])?|\\s` where `s` refers to what you gave, oh my, I came across that once already, heavy stuff. – loveNoHate Feb 04 '14 at 22:32
  • No, wait, the `s` you referred to is in the string already, the ss at the front and beginning must mean something else!?! – loveNoHate Feb 04 '14 at 22:34
  • Also because in the other uppercase letter tokens, you have the same tokens in lowercase in front and end, but no place referring them, hmm. – loveNoHate Feb 04 '14 at 22:36
  • haha, chizeemanezzeay. – loveNoHate Feb 04 '14 at 22:37
  • @dollarvar Oh, that's it .. `A..Z` are referred to in the unit productions below, like `{E}{M}`. That is why some entries like `B` and `Y` don't exist (as they are not needed): they refer to a specific alphabet character used in another production. Might be some Flex-ism. Anyway, have fun :) – user2864740 Feb 04 '14 at 22:38
  • Yeah, I am a bit amused about that stuff, all connected to not let us see the flex-ism internals, but as it is here contradictory to the rules in the beginning "define first, then use", it is like a poem and I think I might want to print it and hang it onto my wall. – loveNoHate Feb 04 '14 at 22:44