CSS question about Id selector problems?

Question

How can i get the ba selector to work when I use it as an id selector instead of a class selector in the following code?

This will not work with the ba as the id attribute.

#abc textarea#ba {
   height: 400px; 
   width: 660px;
}

This will work with the ba as the class attribute.

#abc textarea.ba {
   height: 400px; 
   width: 660px;
}

Answer 1

I can't see why your example wouldn't work.

Are you 100% sure you have a textarea with the ID ba inside an element with the ID abc? Remember, name attributes don't count. Maybe you have a duplicate id in one of the elements? Also, remember that you can assign multiple classes, but not multiple IDs like id='abc def'.

Edit: This works fine for me:

<style type="text/css">
#abc textarea#ba {
   height: 400px; 
   width: 660px;
   background-color: lightyellow;
}

</style>

<div id="abc">
  <textarea id="ba">
    I'm 400  wide, 660 tall and light yellow!
  </textarea>
</div>

Answer 2

The whole point of id's is that they're unique (identifiers) so you should never need to select in this way and should just use

#ba {
   height: 400px; 
   width: 660px;
}

If you have multiple #ba's then you're not doing it right.

'id = name [CS] This attribute assigns a name to an element. This name must be unique in a document.'

Source: http://www.w3.org/TR/html401/struct/global.html#h-7.5.2