CSS selector issue - html

Question

This is my html code:
<label for="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]"
class="error" id="tx_alterneteducationcatalog_subscriberadd[newSubscriber]
[gender]-error">This field is required.</label>
this is my css code:
#tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]-error{
display: none !important
}
For some reason the float right not working. Even in the firebug it is not showing that I put a float:right !important. Why?

Answer 1

The selector
#tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]-error
is not valid. The square brackets denote attribute selectors, so what you have is
#tx_alterneteducationcatalog_subscriberadd
[newSubscriber]
[gender]
... followed by, quite literally, a syntax error in -error because an identifier is not expected there.
If you escape all the square brackets, the entire ID selector will be parsed correctly:
#tx_alterneteducationcatalog_subscriberadd\[newSubscriber\]\[gender\]-error
... but I prefer just using an attribute selector to match the ID instead:
[id="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]-error"]
You could also select by the for attribute and the .error class rather than id, but it's not clear to me why a validation error would be marked up in a label element in the first place. The text, for one, says absolutely nothing about what field it is "labeling" exactly; all it says is that it's required.
I just noticed there's a line break in your id attribute. If this is how your actual markup appears exactly, then your markup is invalid. That being said you should still be able to account for it in your CSS with the escape sequence \a (see section 4.3.7 of the spec):
#tx_alterneteducationcatalog_subscriberadd\[newSubscriber\]\a\[gender\]-error
[id="tx_alterneteducationcatalog_subscriberadd[newSubscriber]\a[gender]-error"]

Answer 2

Because [] is used to denote attributes in CSS selectors, you cannot use them as classnames or ids unless you use the attribute selector to match the string as such:
*[id="a[b]-c(d)"]{ color: yellow; }
<div id="a[b]-c(d)">Selected</div>
This is not recommended and it's better to use classes for this and restrain them to the relevant conventions.

Answer 3

I finally managed to make this work by using this code:
label[for="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]"]‌​{
float: right !important
}
and there was a FTP issue. After uploading it puts me some weird characters. After removing it. It works

Answer 4

Square brackets are not valid characters for css identifiers: http://www.w3.org/TR/CSS21/syndata.html#characters