Am I missing something here? Can first-child not be used on buttons?

I'm trying to apply a first-child class on to a button, using this markup:

button:first-child {
    background: red;
}

But it's turning all of my buttons red instead of just the first. The html markup is this:

    <ul>
        <li>
            <button type="button"><img src="larrow.png" alt="<" /></button>
        </li>
        <li>
            <button type="button">Test</bu开发者_开发问答tton>
        </li>
        <li>
            <button type="button"><img src="rarrow.png" alt=">" /></button>
        </li>
    </ul>

Any suggestions? I'm sure I'm just doing something wrong.

try ul li:first-child button {background: red}

Demo: http://jsbin.com/uzoko4

You want to select the first child of your <li> list an then the button:

li:first-child button {
    background: red;
}

The button does not have a child node. It is in the context of a separate LI in another branch.

I'm nute sure, but I don't think Buttons can have children from a CSS perspective. You should create a class insted.

I think what you want is something like:

li:first-child button {
    background: red;
}

I would be sure and be more specific than that, though. Maybe:

ul.redbutton li:first-child button {
    background: red;
}

<ul class="redbutton">
    <li>
        <button type="button"><img src="larrow.png" alt="<" /></button>
    </li>
    <li>
        <button type="button">Test</button>
    </li>
    <li>
        <button type="button"><img src="rarrow.png" alt=">" /></button>
    </li>
</ul>