Solution 1 :

.t2 > tbody selects <tbody> elements where the parent is a .t2 class element.

tbody > tr selects all <tr> elements where the parent is a <tbody> element.

tr > th selects all <th> elements where the parent is a <tr> element.

tr > td selects all <td> elements where the parent is a <tr> element.

Although you have not coded <tbody> explicitly, the browser will add in the <tbody> when displaying it.

enter image description here

For more info on CSS selectors, please refer to here.

<style>
  body {
    background-color: skyblue;
  }
  
  .t2 > tbody > tr > th,
  .t2 > tbody > tr > td {
    border: 1px solid white;
  }
</style>

<table class="t2">
  <tr>
    <th>Column 1</th>

  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>

  </tr>


</table>

Solution 2 :

Using relational selectors (Ones that depend on the ordering of elements on a page) is highly discouraged as they’re easily broken by changes in layout or additions of new page elements. You want to add either a unique ID or custom class so that future changes do not break your previous work.

Solution 3 :

As far as I’m aware, tr does not take border styles without using border collapse. See here: Why TR not taking style?

Furthermore, the > selector in CSS only applies to the immediate children of the indicate style. Since td and th are children of the tr element, they are not being picked up. You may want to use:

.t2 td, th{
  border: 1px solid white;
}

instead, which should apply the style to the nested children of .t2 as well.

Problem :

I have two tables, this is just the 2nd. I want to style the 2nd table without affecting the first table. I also do not want to have to id or create classes for each tag. Visual studio seems to understand what I’m telling it to do but its not translating onto the web page. What am I missing?

<style>
    .t2 > tr th td{
                   border: 1px solid white;
               }
    </style>

    <table class="t2">
            <tr>
                <th>Column 1</th>

            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>

            </tr>


        </table>

Comments

Comment posted by Tugboat

Wow this is really interesting how that works

. It’s funny that you shared the link to W3school because before I asked my question I was on that exact page trying to figure this out; which is how I came to my limited understanding of referencing parent and child elements in the styles. Thank you yinsweet the code works beautifully and I’m looking forward to trying new things with this new bit of knowledge!

Comment posted by Tugboat

The relational selector was based off of a class that was unique to that table. I just wanted to be efficient with my code so I didn’t create an id for each element. Thank you for responding and offering your wisdom Milo! I appreciate the feedback.

Comment posted by Tugboat

Thank you for sharing your experience and adding a link so I can continue to educate myself on the subject! I’m obviously new and really appreciate the help.

By

Leave a Reply

Your email address will not be published. Required fields are marked *