0

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?

j08691
  • 204,283
  • 31
  • 260
  • 272
Attila Naghi
  • 2,535
  • 6
  • 37
  • 59
  • 2
    `[]` is used to denote attributes, so this selector is invalid, as in: `[gender]-error` will never be correctly interpreted unless you use `*[id="#tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]-error"]` to specifically match the id of the selector as a string. – somethinghere Sep 02 '15 at 13:35
  • can you give me a full example of this ? – Attila Naghi Sep 02 '15 at 13:37
  • @Chester — That **is** a full example. – Quentin Sep 02 '15 at 13:39
  • http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – j08691 Sep 02 '15 at 13:40
  • this : *[id="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]-error"]‌​ {float: right} is not working for me – Attila Naghi Sep 02 '15 at 13:45
  • @Chester while working on the snippet I posted it didn't work for me either, tbh. Cant put my finger on that. – somethinghere Sep 02 '15 at 13:46
  • Works for me: http://jsbin.com/yunaquzana/1/edit?html,css,output – Quentin Sep 02 '15 at 13:47
  • @somethinghere: I don't know if this has to do with the formatting of the question, but there appears to be a line break in the id attribute. If that same line break appears in the original markup, then that's just one more to add to the multiple issues with the original markup. – BoltClock Sep 02 '15 at 13:48
  • neither this version is not working : label[id="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]-error"]‌​ {float: right} for me – Attila Naghi Sep 02 '15 at 13:48
  • Weird I got this : label[for="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]"]‌​{float: right} in my code . After a ctrl+u and click on my css. Any idea ? – Attila Naghi Sep 02 '15 at 13:50
  • @BoltClock let's all agree that this string is too long and complicated to be of much use and it's to error prone. As the pastebin shows it can work (I couldnt get it to work in the snippet, but after modifying it to just letters it worked so its probably some invisible chars). Any chance theres actually a length limit on css selector string...? – somethinghere Sep 02 '15 at 13:50
  • @somethinghere: No, it's most definitely either the newline in the HTML or some junk characters in either HTML or CSS (as just shown by the OP...). – BoltClock Sep 02 '15 at 13:51

4 Answers4

3

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"]
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
1

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.

somethinghere
  • 16,311
  • 2
  • 28
  • 42
0

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

Attila Naghi
  • 2,535
  • 6
  • 37
  • 59
-1

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

Mochilo
  • 301
  • 1
  • 10
  • 2
    They are. In fact, they have a special meaning in selectors, and that is the real reason why this selector is invalid. I suspect you meant to say "identifiers" rather than "selectors". – BoltClock Sep 02 '15 at 13:41