4

I would like to make font color of a table cell where there is a img inside it red. How would I use css selector to specifically do that? The question can be extend to how to select an element which has a specific type of element as its children. Thanks

sammiwei
  • 3,140
  • 9
  • 41
  • 53

2 Answers2

3

Do you know ahead of time which cells will have an image in them? If so add a class to the td element, for example:

<tr>
   <td class="has-image"><img src="..." /></td>
</tr>

That's the easiest way... Otherwise you'd need to use JavaScript. In jquery this would look like: 

$('td img').parents('td').addClass('has-image');
stakolee
  • 893
  • 1
  • 7
  • 20
2

To select all td containing img in CSS:

td:has(img)

To select all td having a direct child img in CSS:

td:has(> img)

In CSS4 there is a spec, to mark the element, which you want to style, in a larger selector. The actual symbol varies and currently points to !.

So in your case the selector would look like this (according to the current spec):

table !td img {
  font-color: red;
}

Note, however, that this is not supported in any current browser.

Mikael Dúi Bolinder
  • 2,080
  • 2
  • 19
  • 44
Sirko
  • 72,589
  • 19
  • 149
  • 183
  • 2
    Can I ask why you bothered even putting an answer like this when it is "not supported in any current browser"? That is effectively equivalent to not being an answer at all. – ScottS Mar 05 '13 at 19:48
  • 1
    Just to point out further developments. I do not expect this answer to be accepted, but add this for reference later on. – Sirko Mar 05 '13 at 19:49
  • I like answers that contain what may be coming, but it does seem like such an answer should also include a solution for the here and now (since obviously the OP needs some answer for today, not whenever CSS4 may come about in browsers). – ScottS Mar 05 '13 at 19:55