HTML first table column how to inverse "td + td"?

Question

I'm building a table similar to this:

<head>
  <style>
    td + td {
      background-color: red
    }
  </style>
</head>

<body>
  <table style="border: solid 1px black">
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
  </table>
</body>

using "td + td" to select everything BUT the first column, which works just fine for me.

<head>
  <style>
    td + td {
      background-color: red
    }
  </style>
</head>

Now inversing what "td + td" does by using "td:first-child" works fine, too:

<head>
  <style>
    td:first-child {
      background-color: red
    }
  </style>
</head>

<body>
  <table style="border: solid 1px black">
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
  </table>
</body>

however I'm looking for a way to turn "td + td" around (inverse/reverse) to do the same "td:first-child" does. In other words I'm looking for something like "td - (td + td)" which is not actually a working piece of code. So I can put it into the <style></style> tags in my HTML file.

Searching for a solution didn't get me anywhere so here I am, hi.

EDIT:
there are basically two outcomes which can be achieved here:
- selecting everything BUT the first column
and
- selecting the first column ONLY
Both can be approached differently. So far I've learned about two ways to go for

"select all BUT first column"

1. "td + td"
2. "td:nth-child"

and one way to go for

"select first column ONLY"

1. "???"
2. "td:first-child"

I'm missing the counterpart of "td + td" without using any version of :nth-child or :type etc. (looking for a no-colon version, like "td + td" is).

Why? Learning more ways to approach things to improve my overall coding skills.

Hi to you too. Maybe you will want to clarify more about your desired result. It's hard to understand what you want (or why) from your question. — AVAVT, Dec 04 '15 at 10:27
`td - (td + td)`, I am failing to understand what this means - could you put it in words rather than in mathematical terms perhaps? Might help clear it up a bit ^.^ — SidOfc, Dec 04 '15 at 10:43
You want to combine `first-child` and `td + td` and `last-child`? — Asons, Dec 04 '15 at 10:43

score 1 · Accepted Answer · answered Dec 04 '15 at 10:49

As you already know, td + td means the style applies only to table cells directly following another table cells -> adjacent selector

To Note:

directly following

There is NO css selector to apply to elements which are just before another element (reverse of above - previous sibling selector).

Reason:

When a browser get a set of adjacent elements which it has to stack on the page, it goes in the order in which they appear in the HTML.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index

css selectors are designed to be easy (fast) to implement for the browser. The document can be traversed once, matching elements as you go, with no need to ever go backward to adjust a match

Thanks for clearing that up. – coderighton Dec 04 '15 at 10:56 — coderighton, Dec 04 '15 at 10:56

score 0 · Answer 2 · answered Dec 04 '15 at 10:27

0

If I understand you correctly, you need nth-child using odd and even like this:

td:nth-child(odd){
  background-color: blue;
}
td:nth-child(even){
  background-color: green;
}
td:first-child {
   background-color: red
}

answered Dec 04 '15 at 10:27

Bhojendra Rauniyar

83,432
35
168
231

score 0 · Answer 3 · answered Dec 04 '15 at 10:29

0

I think the most easy solution to do this is the following:

td {
    background-color: red;
}

td:last-child {
    background-color: white;
}

answered Dec 04 '15 at 10:29

Frank Spin

1,463
15
23

OP html may be just for demo. There may be other tds... – Bhojendra Rauniyar Dec 04 '15 at 10:30

HTML first table column how to inverse "td + td"?

3 Answers3