Hi Jan-Erik,
there are ways to do that. They are called attribute selectors and
adjacent sibling combinators.
Your structure:
<figure>
<img src="2012-12-15_13-01-21_14364.jpg" width="1024"
height="681" alt="">
<figcaption>Bla bla bla bla bla</figcaption>
</figure>
So if wanted a special style for your figcaption you could write
something like this:
img[width="1024"] + figcaption {
border: 1px solid black;
}
The first part of the selector checks for an 'img' element with a
'width' attribute with the value of '1024' (even if the actual width is
different!). The second part looks for an 'adjacent sibling element' in
this case 'figcaption' to which the style should be applied.
There's a good article about attribute selectors here:
http://css-tricks.com/attribute-selectors/
Adjacent siblings (and some more stuff) is explained here:
http://css-tricks.com/child-and-sibling-selectors/
Hope this helps,
Jørgen
Am 17.12.12 08:54, schrieb Jan Erik Moström:
Since I like photography much of my dabbling in CSS is about showing
my photos in various ways. One thing I've always wanted to do is to
get the image width so I can use it in my declaration but I've never
found a CSS-only solution.
For example, assume some HTML code along these lines
<figure> <img src="2012-12-15_13-01-21_14364.jpg" width="1024"
height="681" alt=""> <figcaption>Bla bla bla bla bla</figcaption>
</figure>
Now I would like a parts of my figcaption and figure styled based on
the photo width (not same for all figures/figcaptions)
Is this possible without using javascript or some server-side
scripting. So far I've done this using server-side scripting but I
would like to know if there is a way to do it using CSS only (I
haven't found a way in my searches).
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
