What might be causing my direct descendant selector to not work as expected?

Question

What might be causing my direct descendant selector to not work as expected?

I'm struggling with my direct descendant selector. Let's analyze a straightforward example:

.myDiv > table tr:first-child td {
  font-weight: bold;
  text-align: center;
}

<div class="myDiv">
  <table style="width:100%">
    <tr>
      <td style="width:37%">Revenue & Cost</td>
      <td style="width:43%">Name</td>
      <td style="width:20%">Income</td>
    </tr>
    <tr>
      <td>column 1</td>
      <td colspan="2">
        <table id="tableChild" width="100%">
          <tr>
            <td>child 1 - Should NOT bold</td>
            <td>child 2 - Should NOT bold</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

Clearly, this will impact the table with id tableChild. My expectation is to have bold text on the first row of the initial table.

Feel free to check out my code on JSFiddle

html css css-selectors html-table

Answer 1

Answer №1

To start off, make sure to properly define the table:

<table>
  <thead>
    <tr> INSERT TITLE ROW HERE </tr>
  </thead>
  <tbody>
    ADD CONTENT ROWS HERE
  </tbody>
</table>

After that, your CSS selector should look like this:

.myDiv>table>thead>tr>td {
    ...
}

Answer 2

To start off, make sure to properly define the table:

<table>
  <thead>
    <tr> INSERT TITLE ROW HERE </tr>
  </thead>
  <tbody>
    ADD CONTENT ROWS HERE
  </tbody>
</table>

After that, your CSS selector should look like this:

.myDiv>table>thead>tr>td {
    ...
}

Answer 3

Answer №2

Your table elements will be automatically filled in by the browser:

Give this a shot:

.myDiv > table > tbody > tr:first-child td

https://jsfiddle.net/64yh9jds/2/

Answer 4

Your table elements will be automatically filled in by the browser:

Give this a shot:

.myDiv > table > tbody > tr:first-child td

https://jsfiddle.net/64yh9jds/2/

What might be causing my direct descendant selector to not work as expected?

Answer №1

Answer №2

Similar questions

Ensure that breadcrumb links remain on a single line by using text truncation in Bootstrap 5

What steps do I need to take to ensure the CSS hover effect functions properly?

Creating dynamic input forms in PHP

After applying styling, the modal close button refuses to be clicked

Update a script that handles input float labels to support textarea elements as well

Instructions on how to create a horizontal scrolling div using the mouse scroll wheel

Tips for altering value by selecting radio buttons

Changing styles with the use of bootstrap.css themes on the fly

completion of bootstrap content

Positioning elements next to each other in jQuery on mouse over - while also addressing scrolling issues in a div

Is there a way to modify the way a screen-reading tool pronounces a specific word in a sentence without causing interruptions in the middle of the sentence?

"Form submission fails to populate _POST when file and text fields are used simultaneously

- shorthand CSS properties roster- index of abbreviated CSS attributes

When using the <object> tag, it may not always render at 100% height as intended

Why Does my Overlay Keep Bouncing when Using JQuery to slideDown / slideUp Text on Image?

The Conflict-Free Dilemma of JQuery Cycle

Display one of two divs after clicking a button depending on the input from a form field

Uncertainty surrounding the extent of a button's scope within an Angular application

The Angular Material autocomplete panel does not disappear when autocomplete is hidden within a scrollable region

Struggling with applying mixins