how to css for data attribute [duplicate]

Question

i want to css for my data attribute. i know how to do before and after but it is not for before and after. i will be my image caption i want to change that color, font size, font family etc..

<a href="products/Comfo-Back-Adirondack-Chair.jpg" class="ilightbox" data-caption="Adirondack Chair, PATC2400, Size : 32” W x 36” D x 40” H"><img src="products/th/Comfo-Back-Adirondack-Chair.jpg" /></a>

see the data-caption this is one value not fix . if fix then i can but it not fix but how can do. have any way ?

Strangely, for all its sheer popularity, this question does not come up in the list of suggestions (I just checked myself). I wonder why. — BoltClock
– BoltClock, Commented Mar 26, 2014 at 3:17
If you're wanting to apply styles to the value of "Adirondack Chair, ...", you'll need to explain how it's being rendered. The attribute alone doesn't do that; it's just text. — Jonathan Lonowski
– Jonathan Lonowski, Commented Mar 26, 2014 at 3:19

SomeKittens · Accepted Answer · 2014-03-26 03:15:17Z

4

Use the following to select by attribute:

[data-caption] {
  /* rules */
}

If you want to only select elements where the attribute has a given value:

[data-caption="this is the value"] {
  /* rules */
}

Read more about the different kinds of attribute selectors at MDN

answered Mar 26, 2014 at 3:15

SomeKittens

39.6k19 gold badges117 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to css for data attribute [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related