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?

12
  • 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. Commented Sep 2, 2015 at 13:35
  • can you give me a full example of this ? Commented Sep 2, 2015 at 13:37
  • @Chester — That is a full example. Commented Sep 2, 2015 at 13:39
  • stackoverflow.com/questions/70579/… Commented Sep 2, 2015 at 13:40
  • this : *[id="tx_alterneteducationcatalog_subscriberadd[newSubscriber][gender]-error"]‌​ {float: right} is not working for me Commented Sep 2, 2015 at 13:45

4 Answers 4

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"]
Sign up to request clarification or add additional context in comments.

4 Comments

I think that using the id for this seems to be a bit too specific and I'm guessing the code could use some refactoring. I didn't know you could use escape characters in CSS though (although I hope I will never have too)
can you give me an example with the for attribute ?
@Chester <label for="id-of-input">This label links to the input</label>
@Chester: I'm sure you can figure it out with the id attribute example I've given.
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.

Comments

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

Comments

-1

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

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.