2

i would like to know how to write a selector for this case:

<a href="/shows/test/..." class="ico-wrap">
  <img titie="something" width="91" src="somthing.jpg" />
  <span class="ico">
   <i class="ss-play">content</i>
  </span>
</a>

I am trying to style all images that have a size of 91 that also contain a span with class .ico that has an "i" tag of ss-play. pretty much i was to style the ico span if it has children "i" with class ss-play

My first attempt was to solve this with the url, so i used this selector, which works fine however, there are instances in the html where the style is overridden.

a.ico-wrap[href*="shows"] img[width*="91"] ~ .ico

this style selected all a tags with ico-wrap class that had images of that width. though it worked, i quickly noticed not all images with "shows" in their links had a play icon. so the solution was partial. i want to be able to target those images(91) that somehow have that i tag with ss-play. Please help.

user2132404
  • 35
  • 1
  • 6
  • From what I understand, this is intentionally not possible – Elliott Mar 28 '14 at 14:48
  • There are so many posts about styling parent elements based on children. It can't be done with just CSS. http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?rq=1 – disinfor Mar 28 '14 at 14:50

1 Answers1

2

The only possibility is to place the image inside the .ico tag. Otherwise it will not work with pure CSS due to the function of CSS. It is cascading and you cannot select a specific element, which contains a specific element.

KittMedia
  • 7,106
  • 13
  • 31
  • 36