-1

I know how to set a CSS-rule für all elements of a type, all elements of a ID and all elements of a type and a ID. But I do not know how to do that if only the parent does have a class or ID.

I want to set the class in the table but I want to define the CSS-rule for the tables element.

E.g. Every TH inside a TABLE of class "ABC" should have red textcolor.

<table class="ABC">
<tr>
<th>should be red</th>
<td>should be black</td>
</tr>
</table>

<table>
<tr>
<th>should be black</th>
<td>should be black</td>
</tr>
</table>

How do do this selector?

chris01
  • 10,921
  • 9
  • 54
  • 93

1 Answers1

3

the descendant selector is simply a space.

table th {} select every th that is a child of table.

table.ABC th select every th that is a child of table with class ABC.

table.ABC th {
  color: red;
}

if you want to select the immediate child of a selector you have to use >.

table.ABC th {} will select only if the th is an immediate child of table.ABC.

this th will match ( note this is not semantically correct h

<table class="ABC">
 <th> ...</th>
</table>

while this th won't match

<table class="ABC">
  <thead>
    <th> ...</th>
  </thead>
</table>
Ahmed Eid
  • 4,414
  • 3
  • 28
  • 34
  • 1
    See: https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator – Rounin Dec 05 '21 at 17:44
  • 1
    It's not only a child but a **Descendant** for direct child use [`>`](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) – Raz Luvaton Dec 05 '21 at 17:48
  • 1
    @Rounin you are correct the space is a `descendant` selector while the `>` is an immediate child selector. ( I will update my answer. ). – Ahmed Eid Dec 05 '21 at 17:48