CSS -- Creating sub classes

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.)

Answer 2

Turns out I need a dot between my base input class and my sub class.

input.req {background-color: Purple;} 

Answer 3

You are missing a dot from class name, try this:

input.req {background-color: Purple;}

Or simply add this style because you are already using this for your textbox:

.req {background-color: Purple;}