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

Question

I already know how to apply CSS to custom data attributes but in my case it just doesn't seem to work. I don't want to select by class but by 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 it doesn't seem to work. Any help would be greatly appreciated.

Do you want to target it by data-store, the actual attribute, or the attribute + the value ? — user1752532
– user1752532, Commented Mar 28, 2015 at 11:08
yeah .. sorry i did not word that correctly. The selectors still apply to a data- attribute so $= , ~= , |= should all still work for [data-store] . But it might not be what you are looking for — user1752532
– user1752532, Commented Mar 28, 2015 at 12:00

BoltClock · Accepted Answer · 2015-03-28 12:04:34Z

The "s you see in the HTML attribute are character references for double quotes. They are represented in a CSS attribute selector as literal double quotes, not the HTML entities, since HTML entities pertain to HTML only. Since the value contains double quotes, use single quotes to delimit the value in your attribute selector so you don't have to escape the double quotes in the value.

The backslashes in the attribute value need to be escaped, so \ becomes \\.

There is also a wayward leading space in your attribute selector that should be removed.

Hence:

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

As mentioned by others, if the element has a class and you can identify that element using that class and some context, it's a better idea to do that. However, the element in question may not always appear in the same context or may not be the only one with the class, and you don't always have control over the markup — so there is nothing wrong with using an attribute selector if you don't have any other options.

andyrandy · Accepted Answer · 2015-03-28 11:18:16Z

1

Why not just use the class? Selecting by data attribute is a very bad idea, especially in that form.

.hello {
    position: fixed !important;
    bottom: 0px !important;
}

Btw, you should try to avoid !important...

Also look at

~=

in your css. It allows spaces in the rel attribute.

edited Mar 28, 2015 at 11:18

answered Mar 28, 2015 at 11:08

andyrandy

74.1k9 gold badges115 silver badges131 bronze badges

8 Comments

user1752532 Over a year ago

This does not answer the question .. comment maybe?

andyrandy Over a year ago

it does answer the question. it´s a much better solution instead of using that weird selector that will only lead to problems. selecting by data attribute is a very bad idea.

user1752532 Over a year ago

I dont want to argue about this but if you can refer the the title of the question ... it does not

andyrandy Over a year ago

ok, but you should be open to different solutions for a problem ;) - especially if they are much better.

Anupam Ram Over a year ago

If I wanted to it that way I would not have come here on SO. It's because of some strict reasons that I am forced to select it via the data-store attribute. Thanks for the suggestion though.

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related