CODEWITHSUNDEEP
htmlcsscss-selectors
Bopinko
Bopinko

Reputation: 15

HTML row style, nth child

I need to apply this css:

tr tr:nth-child(even) { 
    background-color: #E6E6E6"; 
}

to this tag:

<tr style=.......

Can anybody help me?

Upvotes: 0

Views: 1567

Answers (3)

Ethan
Ethan

Reputation: 4375

The reasons your css isn't working are:

  1. Your css is trying to find a tr tag inside of another tr tag, so, instead of writing tr tr:nth-child, you should write tr:nth-child.
  2. There is a double quote after the hex code #E6E6E6".

Unfortunately it's impossible to put a :nth-child selector in a style attribute, try this instead:

tr:nth-child(even) {
  background-color: #E6E6E6;
}
<table>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
  </tr>
  <tr>
    <td>Nam at nunc gravida, commodo eros vel, ultrices metus.</td>
  </tr>
  <tr>
    <td>Etiam eleifend porttitor pulvinar.</td>
  </tr>
  <tr>
    <td>Cras cursus ut erat convallis porttitor.</td>
  </tr>
</table>

Upvotes: 2

dutchsociety
dutchsociety

Reputation: 583

Think I don't understand your question well, but if I interpretate it correctly I could make it like so:

tr:nth-child(2) { 
  background-color: blue;
}
tr:nth-child(4) { 
  background-color: black;
}
tr:nth-child(6) { 
  background-color: brown;
}
tr:nth-child(8) { 
  background-color: green;
}
tr:nth-child(10) { 
  background-color: pink;
}
<table class="table">
  <tr>
    <td>Text..</td>
  </tr>
  <tr>
    <td>
      Text..
    </td>
  </tr>
  <tr>
    <td>
      Text..
    </td>
  </tr>
  <tr>
    <td>
      Text..
    </td>
  </tr>
  <tr>
    <td>
      Text..
    </td>
  </tr>
  <tr>
    <td>
      Text..
    </td>
  </tr>
  <tr>
    <td>
      Text..
    </td>
  </tr>
  <tr>
    <td>
      Text..
    </td>
  </tr>
  <tr>
    <td>
      Text..
    </td>
  </tr>
  <tr>
    <td>
      Text..
    </td>
  </tr>
</table>

Also make sure your HTML and CSS is validated by W3C, there are some problems with yours, also a TR > TR:nth... ?? Why because a tablerow in a tablerow isn't a W3C validated guideline. Check your code here: https://validator.w3.org/#validate_by_input

The class table on your table is not necessary because using table is a default tag at your CSS.

Upvotes: 0

Nel
Nel

Reputation: 1

This does not work

tr tr:nth-child(even) { background-color: #E6E6E6"; }

And your background color has a double quote hex value does not need a quote.

You can try this

table tr:nth-child(even){
  background-color: #E6E6E6;
}
<table width="100%" border="1">
  <tr>
    <td>VIOLA</td>
  </tr>
  <tr>
    <td>VIOLA</td>
  </tr>
    <tr>
    <td>VIOLA</td>
  </tr>
    <tr>
    <td>VIOLA</td>
  </tr>
    <tr>
    <td>VIOLA</td>
  </tr>
    <tr>
    <td>VIOLA</td>
  </tr>
    <tr>
    <td>VIOLA</td>
  </tr>
</table>

Upvotes: 0

Related Questions