On Sep 24, 12:26 pm, Bertilo Wennergren <berti...@gmail.com> wrote:
> s.ross wrote:
> > I have what I'm certain amounts to a CSS misunderstanding on my part.
> > Here's the reduced problem:
>
> > CSS
>
> > input[type='text'], textarea {
> > background-color: #2c2c2c;
> > color: white; }
>
> > .warning {
> > background-color: "#851728"; }
>
> > .error {
> > background-color: "#8D580F"; }
>
> > HTML
>
> > <body>
> > <input type="text" id="title" />
> > </body>
>
> > jQuery
>
> > var title = jQuery("#title");
> > title.addClass('error');
>
> > The problem: The addClass does not affect the styling of #title.
> > Firebug shows .error, but as an empty selector.
>
> Indeed. Lose the quotation marks in the CSS:
>
> .warning {
> background-color: #851728; }
>
> .error {
> background-color: #8D580F; }
>
> But it still won't work. Those rules are too weak.
> The basic rule has greater specificity, and wins.
>
> If you change the rules to this, they will be stronger,
> and win out:
>
> input.warning {
> background-color: #851728; }
>
> input.error {
> background-color: #8D580F; }
>
> This will also work:
>
> body .warning {
> background-color: #851728; }
>
> body .error {
> background-color: #8D580F; }
>
> > Any hints are appreciated. And, BTW, is this an appropriate way to
> > flag errors -- by adding or removing a class?
>
> It's a very good way indeed. I use it all the time.
>
> --
> Bertilo Wennergren <http://bertilow.com>
Thanks so much. I knew it had to do with specificity, but it wasn't
clear what the fix was. CSS blindness :)
