sizzle.js handle selectors with user defined tags or bean tags

Question

I have bean html tags in my markup.

...
<bean:message key="tandc.link" bundle="msg_hws_pricing">
 <ul> 
  <li>Earn + redeem points with My Rewards®</li>                   
  <li>Fitness center</li>
 </ul>
</bean:message>
...

I follow a generic rule to create css selectors for any element, For the li element containing 'Fitness Center' I have a css selector created for this element as :

'#priceBox-container > BEAN:MESSAGE:nth-child(6) > UL:nth-child(1) > LI:nth-child(2)'

While evaluating the same using sizzle.js , I get the error "Error: Syntax error, unrecognized expression: unsupported pseudo: MESSAGE"

How I can generate selectors for these bean objects and evaluate the same using sizzle.js Constrain is I can't change the markup.

Answer 1

Escape the : that directly follows the BEAN namespace prefix:

'#priceBox-container > BEAN\\:MESSAGE:nth-child(6) > UL:nth-child(1) > LI:nth-child(2)'