CSSを使用して、DOMの順序に基づいて要素のスタイルを設定できますか？

Question

要素にスタイルを付ける必要がありますが、要素にクラスまたはIDがなく、コードのその部分を編集してクラスまたはIDを配置することもできません。

はjQueryのでは、私は.EQ [4]か何かでそれを選択するだろうが、私は唯一のCSSを使用することができます。

2番目のスタイルには<td>のスタイルを指定できますか？<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> 

Answer 1

ここでも、より良い互換性のためにIE7とIE8で動作する別の方法です：

.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は最初td以外のすべてを選択し、td + td + tdは、第一及び第二td以外のすべてを選択：2つのCSSルールであなたは終わった。行を考慮する必要があるため、例の複雑さが増しますが、後者のセレクタルールをtr + tr + trセレクタと組み合わせるだけで済みます。
• これは:not(:first-child)を交換するための素晴らしいトリックで、それはそれについて知っておく価値です。それはあなたの例のようにもっと複雑になると、それを使うかどうかはあなた次第です。あなたは、pは、その後のp再びH4続いH3のような異なる要素を扱っているとき
• +
は ~（一般兄弟）に置き換えることができます。 p + pはありませんが、まだ p ~ pになります。
• 上記のコードは、各trがtableの子、唯一の子孫であることを期待していないとして、tableとtrかの間にtbody要素があるのか​​どうか動作します。

Answer 2

あなたは:nth-child()を使用できますが、両方tdとその親trとそれを使用する必要があります。

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

Answer 3

nth-childセレクタを使用し、確かに。この場合、

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

ここでは、これがどのように動作するかについてのgreat explanationです。