HTML/CSS How to apply CSS to "a" with custom data attribute? -


i know how apply css custom data attributes in case doesn't seem work. don't want select class data-store attribute.

html

<a data-store="{&quot;dialoguri&quot;:&quot;\/messages\/compose\/dialog\/&quot;}" href="#"></a> 

css

[data-store=" {&quot;dialoguri&quot;:&quot;\/messages\/compose\/dialog\/&quot;}"]{ position:fixed!important; bottom:0px!important; } 

but doesn't seem work. appreciated.

the &quot;s see in html attribute character references double quotes. represented in css attribute selector literal double quotes, not html entities, since html entities pertain html only. since value contains double quotes, use single quotes delimit value in attribute selector don't have escape double quotes in value.

the backslashes in attribute value need escaped, \ becomes \\.

there wayward leading space in attribute selector should removed.

hence:

[data-store='{"dialoguri":"\\/messages\\/compose\\/dialog\\/"}'] { position:fixed!important; bottom:0px!important; } 

as mentioned others, if element has class , can identify element using class , context, it's better idea that. however, element in question may not appear in same context or may not 1 class, , don't have control on markup — there nothing wrong using attribute selector if don't have other options.


Comments

Popular posts from this blog

google chrome - Developer tools - How to inspect the elements which are added momentarily (by JQuery)? -

angularjs - Showing an empty as first option in select tag -

php - Cloud9 cloud IDE and CakePHP -