Is there syntax for a tr line specific CSS selector?

Question

I'm studying for a HTML, CSS, JS exam and found various resources to help me study. In doing a practice quiz, I have found a question about a tr line CSS selector:

The quiz tells me that option B is correct.

From my research, there is no such thing as a [line |-0,1,3] selector syntax.

I'd like to verify is this syntax is correct, or whether I'm correct in saying that this is an error on the quiz's part.

I've tested this in codepen.io editor which does not work either, this is found here: http://codepen.io/anon/pen/dPwwpB?editors=110

tr [line |- 0,1,3] {
  background-color: blue;
}

Lastly if this syntax is not correct, can you also confirm the correct syntax? (HTML excluded from this post for clarity, but available on the Codepen link)

Answer 1

As mentioned, choice C, tr:first-of-type, tr:last-of-type, is the correct answer, but only if the rows are semantically divided into a thead and a tbody element as choice A seems to imply.

Here's an illustration of how each of the desired elements would be matched based on the above assumption:

tr:first-of-type, tr:last-of-type {
  background-color: lightblue;
}

<table>
  <thead>
    <tr><th>Product         <!-- tr:first-of-type, tr:last-of-type -->
  <tbody>
    <tr><td>Adjustable Race <!-- tr:first-of-type -->
    <tr><td>Blade
    <tr><td>Chainring
    <tr><td>Down Tube       <!-- tr:last-of-type -->
</table>

Assuming the thead and tbody do not have any other children than tr (such as template or script), tr:first-child, tr:last-child would work as well. Note that choice D is incorrect however because it uses the :first-line pseudo-element with legacy single-colon syntax, and not the :first-child pseudo-class, and furthermore the :first-line pseudo-element does not make sense on a table-row element.

Choice B is incorrect, as there is no such syntax. The others make an excellent point in that such syntax does not make sense for a selector, since it appears to use attribute syntax with a non-existent attribute called "lines", followed by garbage masquerading as some sort of operator, followed by invalid value syntax, and on top of all that the entire "attribute selector" is preceded by a descendant combinator even though the selector should be targeting the tr elements and not their descendants. And I agree with CBroe's comment in that it might have been put in simply to confuse — though it does make one wonder if the test setter could have deliberately marked it as the correct answer to troll...

Furthermore, tables don't have a notion of "lines"; they have "rows" instead, so it would be extremely careless to call such a selector "line" (although, then again, we have :link for unvisited links and :visited for visited links, which has come back to bite us now).

You may wonder if there is any special selector syntax for matching table-row elements besides the basic :*-of-type pseudo-classes. No, there isn't. This is because HTML is a row-primary markup language, which means rows are expressed in the form of row elements (hence tr), and columns implied by a series of cell elements. Thus, there is little need to create special selectors to match rows when the basic structural pseudo-classes work just fine for this purpose.

It is not possible to match cells relative to one another based on row semantics however, especially considering that cells can span multiple rows via the rowspan attribute. For example, you can't write a selector matching cells in a certain column relative to a certain multi-row cell unless you select the specific rows that that cell appears in, which often requires prior knowledge of the markup and an assumption that that structure will not change. This may improve with the :has() pseudo-class introduced in Selectors 4, but how it will be used in such a scenario, or if it can at all, remains to be seen.