Why Is "Rgb (224, 226, 213)" an Invalid Property Value

Why is rgb (224, 226, 213) an invalid property value?

You have a space between the rgb and the (, which is not allowed:

header h1 {
    background-color: red;
    color: rgb(224, 226, 213);
}

No, I'm serious, it's not.

Unlike many programming languages, CSS expressly forbids having whitespace between a function name and the opening parenthesis. This applies not only to rgb() and rgba(), but also to other functional values such as url() and attr(), as well as functional pseudo-classes such as :nth-child(), :lang() and :not().

Refer to section 4.3.6 of CSS2.1, which states:

The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ')'. [...] White space characters are allowed around the numerical values.

and also refer to Appendix G for the grammar, precisely the following tokenization, which clearly shows that whitespace is not expected between the identifier and the opening parenthesis:

{ident}"("      {return FUNCTION;}

Polymer styling :host[attribute] failed

You have it wrong on both counts. The correct selector to use is :host([faded]).

• :host ([faded]) is not a valid selector. The space needs to be dropped, because CSS forbids having whitespace between a function name and its accompanying parentheses. Furthermore, parentheses are not allowed in a selector except when part of a recognized function token.

• :host[faded] is grammatically sound, but it won't work because the shadow host is featureless, and therefore cannot be matched by attribute selectors in that context (i.e. when compounded with the :host pseudo). This is why a functional variant is provided for :host in the form of :host(), so you can match the host element against a specific compound selector while still dealing with this restriction.

Related Topics