0

I'm doing some css for my form that looks like:

<sf:form>
     <table>
        ...
     </table>
</sf:form>

(according to Spring framework form tag)

I want to select this form and can't do it in traditional way:

sf:form { 
     property: value; 
}

because of the colon interpreted by css.

I know that I can add an identifier to my form, such as id or class to select it, but also it's interesting for me if there is a way to do it with some css trick. Maybe, taking the parent element of a table tag will take care of it? The sf:form could be taken as parent of a table by:

sf:form>table

But here we have this annoying colon again.

So, can I take a table parent tag without specifying the sf:form one? Or, maybe, there are another ways of dealing with such elements as colon that breaks the structure of a tag in the css case?

user12345423
  • 140
  • 1
  • 1
  • 9

1 Answers1

2

Use a forward slash to escape the colon after the namespace:

sf\:form > table {
    property: value;
}

Example:

http://jsfiddle.net/fZm28/

Reference:

http://msdn.microsoft.com/en-us/library/ms762307(VS.85).aspx

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
  • Adding \ before : had no effect for me. `sf\:form { attribute: value; }` didn't help, but with ` ... #form { attribute: value; }` it's working normally. What could be the possible reasons of that? – user12345423 Jul 16 '14 at 22:52
  • Please make a http://jsfiddle.net demonstrating what you have and let me know what browser and/or version. – Jared Farrish Jul 16 '14 at 22:54
  • 2
    Note that I've checked IE9-11, Chrome and Firefox and it works in each browser. Are you *sure* the *source in the browser* has the `sf:` still present, as in it wasn't processed out by Spring? – Jared Farrish Jul 16 '14 at 23:00
  • All due respect, but that's not an answer to the actual question, which is how to deal with namespaces in CSS selectors. It turned out you didn't *need* to take it into account, but that doesn't change the fact the question is about namespaces in CSS selectors. – Jared Farrish Jul 16 '14 at 23:13
  • Yes, I understood what the problem was about. `sf` is a prefix in Spring framework and if you look on a code in browser after your web-application compilation there will be no but only native
    . So, specifying just a `form` in my css file did the trick. Thank you very much for appropriate hint.
     – user12345423 Jul 16 '14 at 23:42