Re: [selectors4] Styling table column child elements

Le Lun 18 mars 2013 15:21, Simon Sapin a écrit :
> Le 18/03/2013 19:59, Henrik Andersson a écrit :
>> I have noticed that CSS doesn't offer a clear way of styling the
>> elements in a specific table column.
>>
>> With that I mean the children of the table cells.
>>
>> You can style the <col> elements to a minimal extent and thusly affect
>> the table cells. But it is limited to four properties and doesn't work
>> for children of the cells.

Henrik,

In the case of background properties, if rows and row groups and cells of
a column have default background transparency, then the background color
of column will shine in the cells' backgrounds.

17.5.1 Table layers and transparency
http://www.w3.org/TR/CSS21/tables.html#table-layers

>>
>> You could in theory use the :nth-of (and friends) selectors to do this,
>> but there are two issues.
>>
>> The first one being the use of numerical indexes. They are bothersome to
>> figure out and are not semantically clear like identifiers. They also
>> risk becoming wrong when the column list is changed.
>>
>> The second issue is that they wouldn't work correctly with tables that
>> use colspans. The assumption of one element=one column would fall apart
>> there.
>>
>> The traditional workaround is to adjust the markup to have each and
>> every cell in the column have a specific class. Suffice to say, but that
>> is incredibly tedious, error prone and increases the size of the markup.

Also

td:first-child + td + td { ... declaration block ...}

will select cells in 3rd column and is often recommended for CSS 2.1 and
considered the traditional way to code this in CSS 2.1.


>>
>> Instead I think that CSS needs a new selector to deal with this
>> situation. It is a rather specific case, but I see no better solution.

Your post would have been easier to follow with some made-up examples,
linked tests.


>
> Hi,
>
> Selectors Level 4 has some ideas about this. AFAIK it’s still open to
> discussion:
>
> http://dev.w3.org/csswg/selectors4/#table-pseudos
>
> Please reply here for feedback on this.

Simon,

In example 52:

  <tr><td span="2">D <td>E
  <tr><td>F <td span="2">G

should be instead/rather

  <tr><td colspan="2">D <td>E
  <tr><td>F <td colspan="2">G

Also, example 52 is a rather weak example as

col.selected { background: yellow; }

seems that it should/would suffice too.

This example 52 is not very convincing with regards to how the "||"
(column combinator) can achieve more or better or overcome difficulties
that the traditional way is already doing well in this example.

Gérard
-- 
CSS 2.1 Test suite RC6, March 23rd 2011
http://test.csswg.org/suites/css2.1/20110323/html4/toc.html

Contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/

Web authors' contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html

Received on Tuesday, 19 March 2013 00:27:13 UTC