select all elements within a parent class

Question

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>

score 1 · Accepted Answer · answered May 27 '20 at 01:31

.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.

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>

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! — Tugboat, May 27 '20 at 15:54

score 0 · Answer 2 · answered May 27 '20 at 00:59

0

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.

answered May 27 '20 at 00:59

Milo Todt

44
2

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. – Tugboat May 27 '20 at 15:46

score 0 · Answer 3 · answered May 27 '20 at 01:10

0

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.

answered May 27 '20 at 01:10

Jack Parkinson

681
11
35

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. – Tugboat May 27 '20 at 15:48

select all elements within a parent class

3 Answers3