Search code examples
cssselector

css selector to select a table cell contains img

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

Solution

  • 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.