W3C home > Mailing lists > Public > www-style@w3.org > March 2013

Re: [selectors4] Styling table column child elements

From: Gérard Talbot <www-style@gtalbot.org>
Date: Mon, 18 Mar 2013 20:26:39 -0400
Message-ID: <a90832c548e9b61bc5cc5ef7d6f1373b.squirrel@ed-sh-cp3.entirelydigital.com>
To: "Simon Sapin" <simon.sapin@exyr.org>, "Henrik Andersson" <henke@henke37.cjb.net>
Cc: "www-style@w3.org" <www-style@w3.org>

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.


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

>> 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.


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.


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.

CSS 2.1 Test suite RC6, March 23rd 2011

Contributions to CSS 2.1 test suite

Web authors' contributions to CSS 2.1 test suite
Received on Tuesday, 19 March 2013 00:27:13 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 11 February 2015 12:35:23 UTC