What is the best way to select the initial descendant that matches a specific

Question

What is the best way to select the initial descendant that matches a specific

How can we target only the first matching descendant element, without affecting others further down the hierarchy? For example:

If the HTML structure is like this:

<div class="wrapper">
  <table>
    <tbody>
      <tr>
        <!-- I want to select this specific td --> 
        <td>
          <table>
            <tbody>
              <tr>
                <!-- But not this one -->
                <td>...</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

I've tried using the following CSS selector, but it doesn't seem to produce the desired result:

.wrapper > table > tbody > tr > td {
  ...
}

css

Answer 1

Answer №1

When it comes to inherited properties, like color, they can impact the children of the td element even if they are not specifically targeted by the CSS rule. For example, the 2nd td is a child of the 1st td.

To override inherited properties, you can use the value initial on the children of the selected element. Additionally, you have the flexibility to set other properties for any affected children.

Here's an example involving color:

.wrapper > table > tbody > tr > td {
  color: red;
}

.wrapper > table > tbody > tr > td > * {
  color: initial;
}

<div class="wrapper">
  <table>
    <tbody>
      <tr>
        <!-- I want to target this td --> 
        <td>
          I want to target this td
          <table>
            <tbody>
              <tr>
                <!-- But not this one -->
                <td>But not this one</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

When it comes to inherited properties, like color, they can impact the children of the td element even if they are not specifically targeted by the CSS rule. For example, the 2nd td is a child of the 1st td.

To override inherited properties, you can use the value initial on the children of the selected element. Additionally, you have the flexibility to set other properties for any affected children.

Here's an example involving color:

.wrapper > table > tbody > tr > td {
  color: red;
}

.wrapper > table > tbody > tr > td > * {
  color: initial;
}

<div class="wrapper">
  <table>
    <tbody>
      <tr>
        <!-- I want to target this td --> 
        <td>
          I want to target this td
          <table>
            <tbody>
              <tr>
                <!-- But not this one -->
                <td>But not this one</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

Answer №2

Your CSS code will specifically target only the direct td descendants of direct tr descendants of direct tbody descendants of direct table descendants of any elements with the class of .wrapper.

It's important to note that styles may be inherited from a parent element by the selected tds, or at least seem like they are being inherited.

Below is an example illustrating how you can apply different styles to these elements:

.wrapper > table > tbody > tr > td {
  background: red;
  padding: 4px;
  color: white;
}

td {
  background: blue;
  padding: 10px;
  color: yellow;
  font-weight: 800;
}

#later-descendant {
  background: white;
  color: indigo;
  padding: 3px;
  font-weight: 300;
}

<div class="wrapper">
  <table>
    <tbody>
      <tr>
        <!-- targeting this td --> 
        <td>
          <table>
            <tbody>
              <tr>
                <!-- not targeting this one -->
                <td>yellow</td>
                <td id='later-descendant'>indigo</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 4

Your CSS code will specifically target only the direct td descendants of direct tr descendants of direct tbody descendants of direct table descendants of any elements with the class of .wrapper.

It's important to note that styles may be inherited from a parent element by the selected tds, or at least seem like they are being inherited.

Below is an example illustrating how you can apply different styles to these elements:

.wrapper > table > tbody > tr > td {
  background: red;
  padding: 4px;
  color: white;
}

td {
  background: blue;
  padding: 10px;
  color: yellow;
  font-weight: 800;
}

#later-descendant {
  background: white;
  color: indigo;
  padding: 3px;
  font-weight: 300;
}

<div class="wrapper">
  <table>
    <tbody>
      <tr>
        <!-- targeting this td --> 
        <td>
          <table>
            <tbody>
              <tr>
                <!-- not targeting this one -->
                <td>yellow</td>
                <td id='later-descendant'>indigo</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

What is the best way to select the initial descendant that matches a specific

Answer №1

Answer №2

Similar questions

Place a material-ui React component at the center of a footer section

The markers on Google Maps are currently displaying in the wrong position, despite the latitude and longitude being correct

Is it possible to display a Processing message at the beginning of a datatables table already containing data?

Is JavaScript Gallery Acting Up? Possible Layer Glitch!

Is it possible to modify the font color of a specific MenuItem in material-ui?

How to use JQuery UI sortable to automatically scroll to the bottom of the page

Tips for consistently showing the addition symbol in my search bar

Challenges with implementing emotion in Material UI 5

Purchase Masonry Supplies for Optimal Arrangement

When the bootstrap 5 dropdown is activated, flex wrap functionality triggers vertical scrolling

How well does position:fixed function in Internet Explorer versions 7, 8, and 9?

The background color of the CSS div tag does not cover the entire axis

Semantic UI dropdown field not displaying selected option text

Maximizing the width of an absolute div element inside a container

utilizing the removeClass method to toggle the visibility of a div by removing the "hidden" class

The alignment of the image is malfunctioning

What is the reason for the improper setting of the div position?

Size of text Including line breaks

The console is not displaying the data from the useForm

Set the search input to occupy the full width of the container by utilizing Bootstrap's