2

I'm trying to select the 5% tr, but my css selector does not seem to work. I also have to write one for the 10% tr, which I expect will be simple after the 5% tr is solved. My selector seems to work down to table, but I cannot get it to select the second tr. What am I doing wrong?

Code: 

body > form > div > table > tr:nth-child(2) > td:first-child {
  background-color: red
}
<form method="post">
  <div>
    <table cellpadding="0" align="center" cellspacing="0" border="0">
      <tr>
        <td colspan="3">
          &nbsp;
        </td>
      </tr>
      <tr>
        <td style="width: 5%">
          5%
        </td>
        <td>
          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%; border-color: #e0e0e0;">
            <tr>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td width="10%" valign="top" style="height: 100%;">10%</td>

              <td valign="top" width="90%">
                My Content
              </td>
            </tr>
          </table>
      </tr>
    </table>
  </div>
</form>
dippas
  • 58,591
  • 15
  • 114
  • 126
tarun713
  • 2,177
  • 3
  • 17
  • 31

4 Answers4

3

If you do NOT want to change with your HTML markup, meaning adding classes (which would be easier to target the TR and TD) you can use :nth-of-type

Snippet

tr:nth-of-type(2) {
  background: red
}
table table tr:nth-of-type(2) td:first-of-type{
  background: lightblue
}
<table cellpadding="0" align="center" cellspacing="0" border="0">
      <tr>
        <td colspan="3">
          &nbsp;
        </td>
      </tr>
      <tr>
        <td style="width: 5%">
          5%
        </td>
        <td>
          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%; border-color: #e0e0e0;">
            <tr>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td width="10%" valign="top" style="height: 100%;">10%</td>

              <td valign="top" width="90%">
                My Content
              </td>
            </tr>
          </table>
      </tr>
    </table>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • 1
    plus 1 from me ... no reason having 2 more or less identical answers :) – Asons Feb 05 '16 at 20:59
  • Got it, so I should not use the > characters. My Content is also colored in this solution, but I can use your example to write a more precise solution. Thank you. EDIT: My bad, I said tr in the original post when I should have said td. Fixed that - your solution is correct for my original question. Thank you. – tarun713 Feb 05 '16 at 21:02
  • So its correct for your original question and you mark another answer as accepted? care to explain? – dippas Feb 05 '16 at 21:06
  • Both answers worked for me. I have upvoted your answer. – tarun713 Feb 05 '16 at 21:09
  • Just FYI, If you remember to change that 5% to 6% or that 10% to 9%, the answer you have chosen won't work anymore unless you will change it, so its not so effective :) – dippas Feb 05 '16 at 21:11
  • Yup, understood. At this point we only have access to change what's in the content td. Everything else is system generated, and for the life the site we're generating, we can count on the system continuing to generate the explicit markup with 5%. – tarun713 Feb 05 '16 at 21:14
2

Target with following CSS:

tr[width="10%"]{

}
Maihan Nijat
  • 9,054
  • 11
  • 62
  • 110
2

Give it a class so you can select it directly, without having to specify the entire chain:

<tr class="my-tr">
     <td style="width: 5%">
     ....
</tr>

Then you can select it in css:

.my-tr {
    background-color:red;
}
Omri Aharon
  • 16,959
  • 5
  • 40
  • 58
  • Why use JS when this can be achieved with Pure CSS? and it is not even tagged as JS question :) – dippas Feb 05 '16 at 20:50
  • @dippas Correct, I wanted to show how to select in CSS. Have no idea why I continued with JS :) – Omri Aharon Feb 05 '16 at 20:50
  • Maybe the habit takeover you :) – dippas Feb 05 '16 at 20:53
  • Unfortunately, the html is system generated and I can only apply css after the HTML is generated! Thank you for the response though. I'll vote it up because for folks who do have access to the HTML, this is a valid answer. – tarun713 Feb 05 '16 at 21:01
2

Use nth-of-type pseudo selectors. The nested table was tricky, I used td > table to find it. Your 1st target is background: red and 2nd target is outline:2px solid yellow

table {
  outline: 3px dashed blue;
  table-layout: fixed;
}
table:first-of-type {
  background: rgba(0, 0, 0, .3);
}
/* 1st target acquired */
table:first-of-type tr:nth-of-type(2) td:first-of-type {
  background: red;
}
form > div {
  height: 50vh;
  width: 90vw;
  outline: 1px solid black;
}
td > table {
  outline: 1px solid lime;
}
/* 2nd target acquired */
td > table tr:nth-of-type(2) td:first-of-type {
  outline: 2px solid yellow;
}
<html>

<head>
  <title>TestPage</title>
  <style type="text/css">
    /*body > form > div > table:first-of-type > tr:nth-child(2) > td:first-child { background-color:red };*/
  </style>
</head>

<body>
  <form method="post">
    <div>
      <table cellpadding="0" align="center" cellspacing="0" border="0">
        <tr>
          <td colspan="3">
            &nbsp;
          </td>
        </tr>
        <tr>
          <td style="width: 5%">
            5%
          </td>
          <td>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%; border-color: #e0e0e0;">
              <tr>
                <td colspan="2"></td>
              </tr>
              <tr>
                <td width="10%" valign="top" style="height: 100%;">10%</td>

                <td valign="top" width="90%">
                  My Content
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
  </form>
</body>

</html>
zer00ne
  • 41,936
  • 6
  • 41
  • 68