0

With the following css I define the 1st col of the head of my table

table.search-transport tr th:nth-child(1) { width: 30px; text-align:right; }

I would like to apply this css not only on the head but also on the body of the table.

I know we can proceed in 2 lines:

table.search-transport tr th:nth-child(1),
table.search-transport tr td:nth-child(1)
                  { width: 30px; text-align:right; }

But I would like to know if we can proceed in 1 signe line? Something like:

table.search-transport tr th:nth-child(1) + td:nth-child(1) { width: 30px; text-align:right; }

Thanks.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Bronzato
  • 9,438
  • 29
  • 120
  • 212

3 Answers3

1

As long as it's any cell in the first column? You should be able to simply omit the th/td part altogether, as well as making use of the child selector since a tr can only have either a th or a td as a child (and you want to ensure you only select its child and not any inner elements):

table.search-transport tr > :nth-child(1) { width: 30px; text-align: right; }

(If you want to support older browsers replace :nth-child(1) with :first-child.)

Generally speaking, though, you can't choose both th:nth-child(1) and td:nth-child(1) separately while avoiding duplicating the rest of the selector. This has been covered to death elsewhere on the site already, but see here for a little extra info.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • The problem with the solution you suggest is that I have a label in this 1st cell and this label is also affected. – Bronzato Mar 21 '13 at 17:44
  • Really don't understand, I posted the same answer moments after you posted your question. This guy after making zillion edits posts the same answer as mine and you accept it. – anuj_io Mar 22 '13 at 07:27
0

The CSS selector which you are using currently is poor in terms of performance.

Following line answers your question. 

.search-transport tr > :nth-child(1) { width: 30px; text-align: right; }

Check the fiddle to see selector in action http://jsfiddle.net/LNJLf/

anuj_io
  • 2,043
  • 2
  • 13
  • 19
0

I guess you are looking for the :any pseudoclass. See https://developer.mozilla.org/en-US/docs/CSS/:any.

table.search-transport tr :any(th,td):nth-child(1) { width: 30px; text-align:right; }

Note: you'll need to vendor prefix this. Untested.

  • Not only will you need to prefix this, but you have to repeat the *entire rule* as many times as is necessary depending on how many browsers use the prefix (see [this](http://stackoverflow.com/questions/10753174/css3-combining-selectors-with-or-instead-of-and/10753216#10753216) for example), which makes it even worse than what's already in the question. In other words, it's counterproductive, and useless in its current form. – BoltClock Mar 21 '13 at 17:48
  • Also, the unprefixed version is specced as [`:matches()`](http://www.w3.org/TR/selectors4/#matches) instead. – BoltClock Mar 21 '13 at 17:57