1

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 ?

pagol
  • 507
  • 9
  • 27
  • Strangely, for all its sheer popularity, [this question](http://stackoverflow.com/questions/5324415/select-elements-by-data-attribute-in-css) does not come up in the list of suggestions (I just checked myself). I wonder why. – BoltClock Mar 26 '14 at 03:17
  • 1
    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 Mar 26 '14 at 03:19

1 Answers1

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

SomeKittens
  • 38,868
  • 19
  • 114
  • 143