テーブルのサブ要素の最後の部分を編集

Question

が最後の<td>にページを展開しているテーブルがあります。テーブルの最後のtdをターゲットにして<td>を移動しようとしています。

私は最後のtdのulを取得し、その特定の要素のCSSを編集しようとしています。私は運がないと次のものを追加しようとしました。

table td:last-child: .dropdown-menu { 
 
    { 
 
    margin: -121px 0 0 0 !important; 
 
    }

<table class="my-table"> 
 
    <thead> 
 
    <tr> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>hello</td> 
 
     <td>hello</td> 
 
     <td> 
 
     <span class="dropdown"> 
 
    \t \t \t \t \t <button class="btn btn-default dropdown-toggle btn-xs" type="button" id="menu1" data-toggle="dropdown"> 
 
    \t \t \t \t \t \t Actions <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu dropdown-menu-right" style="min-width: 100px"> 
 
      <li><a style="text-decoration: none !important; cursor: pointer;" class="benefitRecipientDelete">Delete</a></li> 
 
      </a> 
 
      </li> 
 
     </ul> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>hello</td> 
 
     <td>hello</td> 
 
     <td> 
 
     <span class="dropdown"> 
 
    \t \t \t \t \t <button class="btn btn-default dropdown-toggle btn-xs" type="button" id="menu1" data-toggle="dropdown"> 
 
    \t \t \t \t \t \t Actions <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu dropdown-menu-right" style="min-width: 100px"> 
 
      <li><a style="text-decoration: none !important; cursor: pointer;" class="benefitRecipientDelete">Delete</a></li> 
 
      </a> 
 
      </li> 
 
     </ul> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>hello</td> 
 
     <td>hello</td> 
 
     <td> 
 
     <span class="dropdown"> 
 
    \t \t \t \t \t <button class="btn btn-default dropdown-toggle btn-xs" type="button" id="menu1" data-toggle="dropdown"> 
 
    \t \t \t \t \t \t Actions <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu dropdown-menu-right" style="min-width: 100px"> 
 
      <li><a style="text-decoration: none !important; cursor: pointer;" class="benefitRecipientDelete">Delete</a></li> 
 
      </a> 
 
      </li> 
 
     </ul> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

どのように私は私のテーブルの最後のTDのドロップdownmenu/ULを編集することができますか？

Answer 1

擬似コードと二重中括弧の後ろにコロンがあります。

table td:last-child .dropdown-menu { 
 
    margin: -121px 0 0 0; 
 
}

<table class="my-table"> 
 
    <thead> 
 
    <tr> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>hello</td> 
 
     <td>hello</td> 
 
     <td> 
 
     <span class="dropdown"> 
 
    \t \t \t \t \t <button class="btn btn-default dropdown-toggle btn-xs" type="button" id="menu1" data-toggle="dropdown"> 
 
    \t \t \t \t \t \t Actions <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu dropdown-menu-right" style="min-width: 100px"> 
 
      <li><a style="text-decoration: none !important; cursor: pointer;" class="benefitRecipientDelete">Delete</a></li> 
 
     </ul> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>hello</td> 
 
     <td>hello</td> 
 
     <td> 
 
     <span class="dropdown"> 
 
    \t \t \t \t \t <button class="btn btn-default dropdown-toggle btn-xs" type="button" id="menu1" data-toggle="dropdown"> 
 
    \t \t \t \t \t \t Actions <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu dropdown-menu-right" style="min-width: 100px"> 
 
      <li><a style="text-decoration: none !important; cursor: pointer;" class="benefitRecipientDelete">Delete</a></li> 
 
     </ul> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>hello</td> 
 
     <td>hello</td> 
 
     <td> 
 
     <span class="dropdown"> 
 
    \t \t \t \t \t <button class="btn btn-default dropdown-toggle btn-xs" type="button" id="menu1" data-toggle="dropdown"> 
 
    \t \t \t \t \t \t Actions <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu dropdown-menu-right" style="min-width: 100px"> 
 
      <li><a style="text-decoration: none; cursor: pointer;" class="benefitRecipientDelete">Delete</a></li> 
 
     </ul> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>