Can CSS be used to style an element based on it's order in the DOM?

I need to put a style on an element, but the element does not have a class or id, nor can I edit that portion of the code to put a class or id on it.

In jQuery, I would select it with .eq[4] or something, but I can only use CSS.

So the question is - can I style the second <td> in the second <tr>?

<table class="tableClass">
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td> I NEED TO STYLE THIS ONE </td>
        <td>...</td>
    </tr>
</table>

Answers


Here's an alternate method that also works in IE7 and IE8 for better compatibility:

.tableClass tr + tr > td + td {
  /* selects 2nd to last td from 2nd to last rows.
     Do something here with some CSS instructions of your choice.
     Beware of thead and th, they aren't expected in your example */
}
.tableClass tr + tr > td + td + td,
.tableClass tr + tr + tr > td + td {
  /* selects 3rd to last td from 2nd to last rows and also
     2nd to last td from 3rd to last rows.
     Cancel here everything you did in previous CSS rule! */
}
  • td + td selects everything except the first td and td + td + td selects everything except the first and second td: with 2 CSS rules you're done. There's added complexity in your example because you also need to consider rows, but you just have to combine the latter selector rule with tr + tr + tr selector.
  • This is a wonderful trick for replacing :not(:first-child) and it's worth knowing about it; it's up to you to use it or not when it gets more complicated like in your example.
  • The + can be replaced by a ~ (general sibling) when you're dealing with different elements like a h3 followed by p then h4 then again p. There'd be no p + p here but there'd still be a p ~ p.
  • The above code works whether there's a tbody element between table and tr or not, as it doesn't expect each tr to be a child of table, only a descendant.

You can use :nth-child(), but you need to use it with both the td and its parent tr:

.tableClass > tr:nth-child(2) > td:nth-child(2)

Sure, use the nth-child selector. In this case,

table tr:nth-child(2) td:nth-child(2)

Here's a great explanation of how this works.


Need Your Help

Entity Framework vs Spring.NET

.net data-access-layer

I'm trying to build an e-commerce site. Which technology should I use for the Data Access Layer? What are the pros and cons of each?

windows- python hangs on input() or raw_input()

windows input raw-input

I an doing a project in python in which i need to input a character on the basis of the image flashed and it continues for many files in for loop.But while executing at every raw_input or input pro...