HOME > > > > >

:first-child

取得した要素の最初の子要素を取得

サンプル

実行結果

  • listA 0
  • listA 1
  • listA 2
  • listB 0
  • listB 1
  • listB 2
  • listC 0
  • listC 1
  • listC 2

Javascript

  1. $('.jqTest :button').click(function(){
  2.     $('.jqTest ul:first-child').css('border', '1px solid #990000');
  3.     $('.jqTest ul li:first-child').css('background', '#55EEFF');
  4. });

HTML

  1. <div class="jqTest">
  2.     <ul class="listA">
  3.         <li>listA 0</li>
  4.         <li>listA 1</li>
  5.         <li>listA 2</li>
  6.     </ul>
  7.  
  8.     <ul class="listB">
  9.         <li>listB 0</li>
  10.         <li>listB 1</li>
  11.         <li>listB 2</li>
  12.     </ul>
  13.  
  14.     <ul class="listC">
  15.         <li>listC 0</li>
  16.         <li>listC 1</li>
  17.         <li>listC 2</li>
  18.     </ul>
  19.  
  20.     <hr />
  21.  
  22.     <button>ハイライト</button>
  23. </div>