Css селекторов и выбор конкретного элемента

Question

У меня есть таблица с этой формой

<table class="myclass"> 
    <thead> 
     <tr> 
      <th colspan="7">something</th> 
     <tr> 
     <tr> 
      <th>1</th> 
      <th>2</th> 
      <th>3</th> 
      <th>4</th> 
      <th>5</th> 
      <th>6</th> 
      <th>7</th> 
     </tr> 
    </thead> 
    <tbody> 
     etc... 

Я хочу, чтобы применить правило CSS только с чем-то тыс. Это descedant из тра, который, в свою очередь, является первым потомком THEAD который, в свою очередь, является потомком таблицы с MyClass я использовать этот селектор

table.myclass thead > tr th{ 
    background-color:red; 
} 

CSS, но также применяется во всех других го лет в THEAD (1 , 2, 3 и т. Д.). Неужели я пропустил селектор?

Любые хорошие учебные пособия о продвинутых селекторах?

И образец jsfiddle

Answer 1

Вы должны указать, что вы хотите только выбрать th, который является потомком tr, что является первым ребенком из thead:

table.myclass thead > tr:first-child th 

исх : http://css-tricks.com/almanac/selectors/f/first-child/

сценарий: http://jsfiddle.net/3P9nT/1/

Answer 2

В качестве вашего требования вы хотите применить CSS только для первого tr > th. Таким образом, для этого вы можете использовать :first-child CSS Selecter:

table.myclass thead > tr:first-child th{ 
    background-color:red; 
} 

Try in fiddle

Your fiddle