Is there a way to apply css to elements without adding a class to table elements?

Question

Say I have the following...

td {
    padding: 8px;
}

 td a {
     display: block;
     padding: 8px;
     width: 100%;
     height: 100%;
 }

I'd like to apply the first css code to all <td> elements that do not have <a> and I'd like to apply the second one to only those that do have <a>.

I tried the following:

td:not(a) {
    padding: 8px;
}

td:not(td a) {
    padding: 8px;
}

How can I make this work without adding classes to the elements?

Not possible with CSS only. You will need to add class to distinguish cells. — dfsq, May 14 '17 at 20:16
I thought that was the case but was hoping that there was some way that I wasn't aware of. — Howard, May 14 '17 at 20:18
No, CSS doesn't have "contains" (used to have this one, but it meant text content, not tags) or "has". So you will JS to set class on TD first. — dfsq, May 14 '17 at 20:21

score 0 · Answer 1 · answered May 14 '17 at 23:23

This can be done with JavaScript. Let's say you want any td with an <a> element within (I'll assume directly within for simplicity) to have a yellow background. Here's an example in jQuery:

<table>
  <tr>
    <td>No a elements here</td>
    <td>I have an <a href="#">a</a> element.</td>
  </tr>
</table>

CSS:

td {
  border: 1px solid blue;
}

Script:

$(document).ready(function(){
  $('td a').parent().css('background', 'yellow');
});

Pen at https://codepen.io/wahhabb/pen/QvxEjd

Is there a way to apply css to elements without adding a class to table elements?

1 Answers1