Why doesn’t table > tr > td work when using the child selector?

by

In HTML, browsers implicitly add a tbody element within which to contain the tr elements1, so in reality, tr is never a child of table.

Consequently, you have to do this instead:

table > tbody > tr > td

Of course, if you add a tbody element yourself, you use the same selector. The spec explains when a tbody is added implicitly otherwise:

Tag omission

A tbody element’s start tag may be omitted if the first thing inside the tbody element is a tr element, and if the element is not immediately preceded by a tbody thead, or tfoot element whose end tag has been omitted.

1 This is not the case for XHTML documents that are properly served as application/xhtml+xml, however, given its XML roots.

More Related Contents:

  1. Understanding CSS selector priority / specificity
  2. How can I select the last element with a specific class, not last child inside of parent?
  3. Are class names in CSS selectors case sensitive?
  4. CSS3’s border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  5. Table with fixed header and fixed column on pure css
  6. How to display scroll bar onto a html table
  7. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  8. Matching the first/nth element of a certain type in the entire document
  9. Fixed Table Cell Width
  10. Using CSS :before and :after pseudo-elements with inline CSS?
  11. How to make fill height
  12. Using :before and :after CSS selector to insert HTML [duplicate]
  13. :nth-child(even/odd) selector with class [duplicate]
  14. How to CSS: select element based on inner HTML [duplicate]
  15. CSS table-cell equal width
  16. What is the performance impact of the universal selector?
  17. What are the priorities among CSS selectors
  18. Why is nth-child selector not working?
  19. Can a ::before selector be used with a ?
  20. What is the ::content/::slotted pseudo-element and how does it work?
  21. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  22. How do I select an element that has a certain class?
  23. Selecting the last element among various nested containers
  24. Zebra striping a flexbox table with wrapping items
  25. Removing unwanted table cell borders with CSS
  26. How to use nth-child for styling with a table with rowspan?
  27. Is there a CSS not equals selector?
  28. Table vertical header?
  29. How can I select elements in CSS by partial ID value?
  30. How can I get a specific number child using CSS?

Leave a Comment