Wrong css ">" selectors (by me)

Question

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 ?

side note: `>` means `direct descendant of what precedes the >` — BeNdErR, Jun 17 '15 at 10:04
Yes, that what I really meant, just did not know about the tbody tag — loloof64, Jun 17 '15 at 10:06

Jakub Matczak · Accepted Answer · 2015-06-17T10:05:54.813

6

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/

edited Jun 17 '15 at 10:05

answered Jun 17 '15 at 10:01

Jakub Matczak

15,341
5
46
64

How ! I am too much restrictive and accurate ! Ok gonna remove this ">" selector, seems better than adding tbody according to me (what it will be in later html ?) – loloof64 Jun 17 '15 at 10:05
Yes, I think that it's better way too, unless you have nested tabled. – Jakub Matczak Jun 17 '15 at 10:07
I've a new version : http://jsfiddle.net/loloof64/nxvse1hd/11/ But this time, and maybe last question, I would like to remove the gaps between cells : I've tried margin:0, margin:-0.2em inside chess_cell, but does not seems to work. A workaround for this ? Regards – loloof64 Jun 17 '15 at 10:13
Ok. found solution here : http://stackoverflow.com/questions/2279396/how-to-remove-unwanted-space-between-rows-and-columns-in-table – loloof64 Jun 17 '15 at 10:34

score 1 · Answer 2 · answered Jun 17 '15 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);
}

Browsers *never* create implicit thead elements - they only do so with tbody. — BoltClock, Jun 17 '15 at 11:09

score 1 · Answer 3 · answered Jun 17 '15 at 10:03

1

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;

answered Jun 17 '15 at 10:03

Luthando Ntsekwa

4,192
6
23
52

score 1 · Answer 4 · answered Jun 17 '15 at 10:04

1

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/

answered Jun 17 '15 at 10:04

Marc

2,659
3
34
41

score 0 · Answer 5 · answered Jun 17 '15 at 10:07

0

use this:

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

instead of:

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

answered Jun 17 '15 at 10:07

sonam gupta

775
6
17

Wrong css ">" selectors (by me)

5 Answers5