inheritance confusion. Adding a special class for making errors obvious on form validation

Question

So I've got a form... The relevant CSS is (I think):

.libform input {
background-color:transparent;
color:#000;
border-left:0;
border-right:0;
border-top:0;
border-bottom: 1px solid #555;
margin: 0 5px 1px 5px;
display:inline-block;
}
.libform input:focus {
border:0;
border-bottom: 1px dotted #000;
color:#939;
background-color:#fed;
}
.error {
  border-bottom: 1px solid red;
}

Form field:

<? if ($name=="") {$nameerror="error";}?>
<input name="name" type="text" class="<?php echo $nameerror;?>" value="<?echo $name;?>" id="name">

I'd like for when they've left the field blank the input button's underline to change from black to red. But it doesn't seem to inherit right. What am I doing wrong?

Answer 1

Most likely a specificty issue. try:

.libform input.error {
  border-bottom: 1px solid red;
}

Answer 2

Try .libform .error.

http://www.htmldog.com/guides/cssadvanced/specificity/CSS Specificity