CSS selector for the next same parent

Question

I'm restyling a legacy app, changing only the .css behind it. In a simplified scenario I have something like this:

table {
  border: 1px solid black;
}

div.name {
  background-color: red;
}

div+td {
  background-color: yellow;
}

<table>
  <tr>
    <td>
      <div class='name'>Sean</div>
    </td>
    <td>Connery</td>
    <td>1</td>
  </tr>
  <tr>
    <td>
      <div class='name'>Pierce</div>
    </td>
    <td>Brosnan</td>
    <td>2</td>
  </tr>
</table>

I'd like to find a way (with pure css) to set background color for td elements immediately after the td that contain the div with class='name'. In other words I'd like to set background color for cells with 'Connery' and 'Brosnan'.

In my example I've used the selector div + td which is obviously wrong.

Here the fiddle.

In simple words you can't do this using CSS, for detailed you can [click here](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Super User, May 04 '17 at 09:21
If you want it in css, then your have to give a class for the parent of .name class. — athi, May 04 '17 at 09:22
Or move the class to the `td` instead of the `div`, in which case you can say `td.name + td`. — MateBoy, May 04 '17 at 09:22

andreas · Accepted Answer · 2017-05-04T09:27:30.907

There is no "next same parent" selector in CSS. You can use the :nth-child selector to always select the second td:

td:nth-child(2) {...}

table {
  border: 1px solid black;
}

div.name {
  background-color: red;
}

td:nth-child(2) {
  background-color: yellow;
}

<table>
  <tr>
    <td>
      <div class='name'>Sean</div>
    </td>
    <td>Connery</td>
    <td>1</td>
  </tr>
  <tr>
    <td>
      <div class='name'>Pierce</div>
    </td>
    <td>Brosnan</td>
    <td>2</td>
  </tr>
</table>

Or (as suggested in the comments), move your class="name" to the td element and use the adjacent sibling selector +:

.name + td {...}

table {
  border: 1px solid black;
}

.name {
  background-color: red;
}

.name + td {
  background-color: yellow;
}

<table>
  <tr>
    <td class='name'>
      <div>Sean</div>
    </td>
    <td>Connery</td>
    <td>1</td>
  </tr>
  <tr>
    <td class='name'>
      <div>Pierce</div>
    </td>
    <td>Brosnan</td>
    <td>2</td>
  </tr>
</table>

CSS selector for the next same parent

1 Answers1