How To Style A Class Based On Unique ID?

Question

I'm working in a Salesforce APP called Skuid. I can only style by CSS / Javascript and I don't have access to the HTML.

Anyway I'm designing a contact form and this is how the individual fields are styled:

<div class="nx-field nx-modified required" data-uid="20"><textarea></textarea></div>

They each have a unique "data-uid" number.

How can I target data-uid="20" in CSS? Any way to do that? I searched around and can't find anything.

Please help.

Thanks!

http://stackoverflow.com/questions/5324415/select-elements-by-data-attribute-in-css — Anil, Nov 05 '14 at 16:30

score 5 · Accepted Answer · answered Nov 05 '14 at 16:30

5

Use the CSS attribute selector syntax:

div[data-uid="20"] {
    background:red;
}

<div class="nx-field nx-modified required" data-uid="20">
    <textarea></textarea>
</div>
<div class="nx-field nx-modified required" data-uid="21">
    <textarea></textarea>
</div>

answered Nov 05 '14 at 16:30

j08691

204,283
31
260
272

I know I'm not supposed to say thanks here. but f it. THANKS! I'm so happy to have this issue solved!! – Chris Hayes Nov 05 '14 at 16:55

How To Style A Class Based On Unique ID?

1 Answers1