CSS Immediate Child Selector Not Selecting

Question

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
table > tr > th {
 color: red;
}
</style>
</head>
<body>
<table>
 <tr>
  <th>a</th>
  <th>b</th>
 </tr>
</table>
</body>
</html>

I just can't see why the text in the cells are not red. Could you show me what i am missing.

By the way, "table > tbody > tr > th { color: red; }" is making the text red. — KodFun, Mar 10 '18 at 15:49
@TemaniAfif, i want to know why the css code in the question is not working. Am i not doing everything according to the rules? — KodFun, Mar 10 '18 at 15:52
you have a working code and non working code ... so what is the difference between them ? the difference is the answer — Temani Afif, Mar 10 '18 at 15:54
let me explain my concern then. I should not be worrying about how the browser will manipulate and modify my html code while i am writing the css code. I check my code against https://validator.w3.org/ and it says your html is correct. So if it's correct, i am allowed to place tr inside table. My html is correct and my css is correct. In the linked answer, i see no rule stated against tr inside table. I just don't like surprises when it comes to coding. Can you understand my concern? — KodFun, Mar 10 '18 at 16:03
`I should not be worrying about how the browser will manipulate and modify my html code` --> no no, you should be worried :) because it's not you that decide but the specification ;) we all get suprised by some behavior but when we understand them, we work with them — Temani Afif, Mar 10 '18 at 16:06
@TemaniAfif, that's what i am saying. I should be worried about the specification and the browser should behave according to the specification. If the tbody was a must, I would already add it at the first place so there would be no problem. — KodFun, Mar 10 '18 at 16:10
@KodFun: By that logic, does that mean `body > p` should not match `
`, which, aside from the DOCTYPE and title, [is also valid HTML](https://checker.html5.org/?showsource=yes&doc=data%3Atext%2Fhtml%3Bcharset%3Dutf-8%2C%3C%21DOCTYPE+html%3E%250A%3Chtml%3E%250A%3Ctitle%3Ebody+%3E+p%3C%2Ftitle%3E%250A%3Cp%3E%3C%2Fhtml%3E)? — BoltClock, Mar 10 '18 at 16:32
@BoltClock, i checked with doctype and it was interestingly validated. And yes, `body > p' does matches it. From your example, i understand that what body is for html is like what tbody is for table. Thanks for the example. — KodFun, Mar 11 '18 at 08:38
@BoltClock, but still i don't like the way it works. It's not transparent. On html, it allows something, you write css according to that accepted html and it doesn't work. It just doesn't seem robost to me. This is just my opinion. Thanks for your valuable comments. — KodFun, Mar 11 '18 at 08:43

score 0 · Answer 1 · answered Mar 10 '18 at 15:50

What you have are table headers. Firstly, if you want a table cell, use the <td> tag. You do not have to use table > tr > td. If you want to color specific cells, use a class to identify them:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
.cells {
    color: red;
}
</style>
</head>
<body>
<table>
 <tr>
  <td class="cells">a</td>
  <td class="cells">b</td>
 </tr>
</table>
</body>
</html>

If not, just use the tag:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
td {
 color: red;
}
</style>
</head>
<body>
<table>
 <tr>
  <td>a</td>
  <td>b</td>
 </tr>
</table>
</body>
</html>

I hope this is what you wanted.

my question is about > selector. – KodFun Mar 10 '18 at 15:51 — KodFun, Mar 10 '18 at 15:51

score 0 · Accepted Answer · answered Mar 10 '18 at 15:50

Try table tr th instead of table > tr > th because a tbody element is added as a parent element to tr by the browser and since the direct child selector > is used, it won't style the th

table tr th {
  color: red;
}

<table>
  <tr>
    <th>a</th>
    <th>b</th>
  </tr>
</table>

CSS Immediate Child Selector Not Selecting

2 Answers2