Wrong css ">" selectors (by me)

Question

Wrong css ">" selectors (by me)

108 Views Asked by loloof64 At 03 April 2025 at 06:21

I am trying to design a chess board with css3, but it seems like my selectors are wrong. Here is my JsFiddle

So why can't I see the designed test blue and red borders around lines and cells ?

html

<body>
    My chess board
    <table class="chess_board">
       <tr class="chess_line">
          <td class="chess_cell black_cell white_piece"><span>&#9812;</span></td>
          <td class="chess_cell white_cell white_piece"><span>&#9813;</span></td>
          <td class="chess_cell black_cell white_piece"><span>&#9814;</span></td>
          <td class="chess_cell white_cell white_piece"><span>&#9815;</span> </td>
       </tr>
       <tr class="chess_line">
          <td class="chess_cell white_cell"><span>&#9820;</span></td>
          <td class="chess_cell black_cell"><span>&#9821;</span></td>
          <td class="chess_cell white_cell"><span>&#9822;</span></td>
          <td class="chess_cell black_cell"><span>&#9823;</span></td>
      </tr>
    </table>
    My another chess board ... to be drawn !
</body>

css

table.chess_board > tr.chess_line {
  background-color: blue;
}

table.chess_board > tr.chess_line > td.chess_cell {
  border: 2px solid red;
 /*
  font-family: serif;
  font-size: 2.3em;
  width: 1.0em;
  height: 1.0em;
  text-align: center;
  */
}

table.chess_board > tr.chess_line > td.chess_cell > span {
  position: relative;
  bottom: 0.1em;
}

table.chess_board > tr.chess_line > td.white_cell {
  background-color: rgb(217, 245, 2);
}

table.chess_board > tr.chess_line > td.black_cell {
  background-color: rgb(89, 34, 21);
}

table.chess_board > tr.chess_line > td.white_piece {
  color: rgb(179, 48, 63);
}

Can anyone help ?

Original Q&A

There are 5 best solutions below

Mario Araque On 17 June 2015 at 10:02

You need to remove the > of your css, the Browser adds <tbody> and <thead> elements in your source code.

table.chess_board > tr.chess_line {
  background-color: blue;
}

table.chess_board tr.chess_line td.chess_cell {
  border: 2px solid red;
 /*
  font-family: serif;
  font-size: 2.3em;
  width: 1.0em;
  height: 1.0em;
  text-align: center;
  */
}

table.chess_board tr.chess_line td.chess_cell > span {
  position: relative;
  bottom: 0.1em;
}

table.chess_board tr.chess_line td.white_cell {
  background-color: rgb(217, 245, 2);
}

table.chess_board tr.chess_line td.black_cell {
  background-color: rgb(89, 34, 21);
}

table.chess_board tr.chess_line td.white_piece {
  color: rgb(179, 48, 63);
}

Luthando Ntsekwa On 17 June 2015 at 10:03

dragoste is right, your css should be like:

table.chess_board  tr.chess_line {
  background-color: blue;
 }

table.chess_board  tr.chess_line  td.chess_cell {
  border: 2px solid red;

Marc On 17 June 2015 at 10:04

Some browsers add a <tbody> in DOM. and when a <tbody> is there, the selector ">" will not work anymore:

just use in your case the simple inheritance selector.

updated solution: http://jsfiddle.net/nxvse1hd/7/

sonam gupta On 17 June 2015 at 10:07

use this:

table.chess_board  tr.chess_line {
  background-color: blue;
 }

instead of:

table.chess_board > tr.chess_line {
  background-color: blue;
}

**Jakub Matczak** · Accepted Answer

This is because browser automatically puts <tbody> element between table and tr while creating the DOM from HTML.

Check DOM structure in Firebug (or similar tool)

You can either remove > operator like:

table.chess_board tr.chess_line {
  background-color: blue;
}

http://jsfiddle.net/nxvse1hd/8/

or add tbody > like:

table.chess_board > tbody > tr.chess_line {
  background-color: blue;
}

http://jsfiddle.net/nxvse1hd/9/

Wrong css ">" selectors (by me)

There are 5 best solutions below

Related Questions in CSS

Related Questions in CSS-SELECTORS

Trending Questions

Popular # Hahtags

Popular Questions