CODEWITHSUNDEEP
htmlcsscss-selectorshtml-table
Aaron Campbell
Aaron Campbell

Reputation: 602

CSS style elements within <th> scope

In HTML, a table header cell (<th>) can be given a scope attribute to identify whether it is associated with the ensuing column or row or group of them. Is it possible to use a CSS selector to style all table cells (<td>) that are associated with the header cell? I.E., style the entire row if scope="row" or column if scope="column"?

Presupposing the answer is probably "no": then what purpose does the scope attribute serve (other than the CSS [attribute=value] selector)? Does the browser use it for accessibility options? Or should I ignore it as a developer?

Upvotes: 4

Views: 11164

Answers (2)

Joakim
Joakim

Reputation: 71

.tableClass th[scope=col] {
    styleme: beautiful;
}

Upvotes: 5

BoltClock
BoltClock

Reputation: 723668

Is it possible to use a CSS selector to style all table cells (<td>) that are associated with the header cell? I.E., style the entire row if scope="row" or column if scope="column"?

Neither Selectors 3 nor Selectors 4 provides a feature for matching a table cell associated with a specific table header cell. The closest is the column combinator, which is as yet unimplemented, only works with column-based headers in HTML tables, and does not carry any header-cell semantics. In particular, the scope attribute has no effect on the behavior of the column combinator, and it does not distinguish between a <th> and a <td>.

Perhaps such a feature might be worth proposing for Selectors 5 (where the column combinator and the :*-column() pseudo-classes will most likely end up anyway).

Presupposing the answer is probably "no": then what purpose does the scope attribute serve (other than the CSS [attribute=value] selector)? Does the browser use it for accessibility options? Or should I ignore it as a developer?

Some user agents might utilize the scope attribute to construct a more meaningful representation of a table. The HTML5 spec describes a table model which may or may not be used by current implementations. The scope attribute participates in this table model.

If all of this is Greek to you as an author, then it basically comes down to how much metadata you want in your markup. The more, the better.

Upvotes: 2

Related Questions