Question

I have a default style for my input boxes. I would like to add an additional style to the box when I specify a class of “req”. It’s not working. Here’s my code.

CSS:

input{background-color: #000; color: #FFF; border: 1px solid #515151; width: 230px;}
input req {background-color: Purple;}

HTML:

<input id="FirstName" type="text" class="req" />

The textbox reflects the input class, but not the sub class. Any ideas?

Answer 1

In your CSS stylesheet, change:

input req { ... }

to:

input.req { ... }

(input.req denotes all input elements that belong to class req, while input req denotes all req elements that are inside an input element. The dot prefixed class name is merely shorthand for the [class~=req] attribute selector.)