CSS для первой таблицы

Question

У меня есть структура, которая выглядит следующим образом:

<div class="foo"> 
    <table> 
     //... 
    </table> 
    <table> 
     //... 
    </table> 
</div> 

То, что я хочу, чтобы применить конкретные правила CSS только на первом столе, как это могло быть сделано?

Answer 1

Использование CSS3 как ...

.foo table:first-child { 
    // Do somthing 
} 

---

Запасной: (с помощью с помощью JQuery)

$('.foo table:first-child').addClass('first-child'); 

Так CSS как ..

.foo table:first-child, .foo table.first-child { 
     // Do somthing 
} 

Answer 2

Я думаю, что это должно быть сделано.

table:nth-of-type(1) 
    { 
     /*style away */ 
    } 

Answer 3

http://jsfiddle.net/tnjVR/

.foo table:first-child { 
    color:Red; 
} 

Answer 4

nth-of-type, first-child, nth-child или first-of-type бы это сделать ...

table:nth-of-type(1) { 
    ... 
} 

table:first-of-type { 
    ... 
} 

table:first-child { 
    ... 
} 

table:nth-child(1) { 
    ... 
} 

DEMO

Answer 5

попробовать как

.selector table:first-child { 
color:Red; 
} 

Answer 6

.foo > :first-child 

или

.foo > table:first-of-type 

Последнее в случае, если у вас есть элемент без таблицы до table в .foo. Первый гарантирует, что будут указаны только дети .foo, которые являются первыми детьми, а не только потомки первого ребенка .foo.