CSS Selector 'Trick'

[ianrev]

I am not sure if this is a good practice, if it is cross-browser or anything else - but it worked and I thought it was cool.

Our store shipping uses the Advanced Shipping Manager and I have one method for free shipping. I wanted to style the option in the drop down - too call attention to it when available. The returned method values were like ADVANCEDSHIPPING:1, ADVANCEDSHIPPING:2, which were not constant values since the shipping methods returned vary depending on the items in the cart -stymieing my attempt to use a class like class="ADVANCEDSHIPPING:1" for example.

Anyway I was playing with some of the CSS selectors and this seems to work - at least in Firefox

<option value="&mvte:method:module;:&mvte:method:code;" colorme="&mvt:method:name">&mvt:method:name; (&mvt:method:formatted_price;)</option>

and then a style like so

option[colorme*="LTL"] {
color: #3EA055;
font-weight: bold;
border-top: 1px dotted #3EA055;
border-bottom: 1px dotted #3EA055;
background: #FBF6D9;
}

which gives me this

[ATTACH=CONFIG]1106[/ATTACH]

I know, not rocket science but it was cool to find something simple that seems to work (will test other browsers) as the javascript and jquery solutions seemed like overkill.

Great!

Regards
Ian
Evoseedbox

https://evoseedbox.com/

[Bruce - PhosphorMedia]

Re: CSS Selector 'Trick'

Should be fine on any HTML5 compatible browser...at the very least, in lesser browsers, it will do no harm. (BTW: you definently shouldn't use ':' in a class selector though :) )

[habreu]

I am not sure if this is a good practice, if it is cross-browser or anything else - but it worked and I thought it was cool.

Our store shipping uses the Advanced Shipping Manager and I have one method for free shipping. I wanted to style the option in the drop down - too call attention to it when available. The returned method values were like ADVANCEDSHIPPING:1, ADVANCEDSHIPPING:2, which were not constant values since the shipping methods returned vary depending on the items in the cart -stymieing my attempt to use a class like class="ADVANCEDSHIPPING:1" for example.

Anyway I was playing with some of the CSS selectors and this seems to work - at least in Firefox

<option value="&mvte:method:module;:&mvte:method:code;" colorme="&mvt:method:name">&mvt:method:name; (&mvt:method:formatted_price;)</option>

and then a style like so

option[colorme*="LTL"] {
  color: #3EA055; 
  font-weight: bold;
  border-top: 1px dotted #3EA055;
  border-bottom: 1px dotted #3EA055;
  background: #FBF6D9;
}

which gives me this

selector.jpg

I know, not rocket science but it was cool to find something simple that seems to work (will test other browsers) as the javascript and jquery solutions seemed like overkill.