0

I am developing a visualforce renderas pdf in which I create a table but when I try to use the CSS :last-child selector it doesn't work. However the :first-child selector works. Attached is an example of code that has that behavior.

CSS

td:first-child{
   background-color: red;
}
td:last-child{
   background-color: red;
}

HTML

<table>
   <tr>
      <th>th</th>
      <th>th</th>
      <th>th</th>
      <th>th</th>
   </tr>
   <tr>
      <td>td 2</td>
      <td>td 2</td>
      <td>td 2</td>
      <td>td 2</td>
   </tr>
   <tr>
      <td>td 3</td>
      <td>td 3</td>
      <td>td 3</td>
      <td>td 3</td>
   </tr>
   <tr>
      <td>td 4</td>
      <td>td 4</td>
      <td>td 4</td>
      <td>td 4</td>
   </tr>
</table>

The table looks like this enter image description here

Does anyone know what I might be doing wrong and can you help me? thank you very much!!

1 Answer 1

4

:last-child was introduced as part of CSS 3.

The library that Salesforce leverages to turns Visualforce pages into .pdf files, Flying Saucer, only supports up to CSS 2.1 (which is when :first-child was introduced).

The adjacent sibling selector can be used instead, but only if you have a constant number of columns for each row (i.e. td + td + td + td would select the 4th td in each of your trs). Your best bet is probably to simply apply a css class to your target elements.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .