Why doesn't "input .foo" (with a space) CSS style work but "input.foo" (no space) does?

Question

Can anyone explain why the following CSS style works:

input.foo {
    background-color: red;
}

But the following one doesn't:

input .foo {
    background-color: red;
}

All I did was add a space after input.

possible duplicate of [When combining selectors does space means the same as no space?](http://stackoverflow.com/questions/16175379/when-combining-selectors-does-space-means-the-same-as-no-space) — Felix Kling, Sep 19 '14 at 18:41
Because these two selectors mean different things. Basic CSS 101: https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors — deceze, Sep 19 '14 at 18:41

Arbel · Accepted Answer · 2014-09-19T18:48:48.233

input.foo means an input with a class of foo.

input .foo means elements with a class of foo contained in an input element.

These are fundamentally different.

E.g.

label.foo targets this label element:

<label class="foo"></label>

But label .foo will target the span in this:

<label>
    <span class="foo">
</label>

score 0 · Answer 2 · answered Sep 19 '14 at 18:42

You're trying to select an input tag with a class of .foo. The second one selects an element within input with a class of .foo.

The first one means selecting this type of element:

<input class="foo" />

The second means:

<input>
    <div class="foo" />
</input>

Which would be invalid in HTML, but that's beside the point.

2 Answers2