Change a specific input's css elements

Question

<div id="right-side-panel">
        <span>UserName:<br />
        <input id="txtUserName" type="text" />
        </span>
        <br />
        <span>Password:<br />
        <input id="txtPassword" type="password" />
        </span>
        <br />        
        <input id="btnLogin" type="button" value="Login" />
        </div>

How can I reach this txtUserName from css file? I want to change textBox's things.

#right-side-panel .. then?

Thanks in advance

Answer 1

for example: in css #txtUserName { color:black; }

in jQuery $('#txtUserName').css('color', 'black');

Answer 2

The W3C defines IDs as "a unique identifiers to an element", so you just need #txtUserName in order to match that <input>.

Answer 3

why can't you just do: input#txtUserName?