Первые элементы в своих родителях

Соответствует элементам, которые идут первыми в своих непосредственных предках.

Примеры использования:

$('div:first-child')	вернет все div-элементы, которые идут первыми в своих предках.
$('div.lBox:first-child')	вернет все div-элементы класса lBox, которые идут первыми в своих предках.

В отличии от селектора :first, который находит первый из найденных элементов (то есть результатом будет всегда один элемент), :first-child отфильтрует выбранные элементы, оставив только те, которые идут первыми в своих предках. Это различие демонстрируется в следующем примере.

Содержание 1 В действии 1.1 Пример 1 1.2 Пример 2 2 Ссылки

В действии

Пример 1

Найдем и выделим красной рамкой все элементы p, которые лежат первыми внутри своих родителей. Кроме этого, найдем первый p-элемент и пометим его синей звездочкой:

~lt~!DOCTYPE~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    body{
      font:10pt Arial,sans-serif; 
      color:#555;
    }
    ul{
      float:left; 
      margin:3px; margin-left:15px; 
      padding:10px 10px 5px 10px; 
      border:2px solid #ddd;
    }
    ul.matched{
      background:url('/tags/images/matched.png') 0% 2% no-repeat;
    }
    ul.result{
      position:relative; 
      left:-3px; 
      border:3px solid #ff8888;
    }
    li{
      position:relative; 
      float:left; 
      margin:7px; 
      padding:2px; 
      width:60px; 
      height:60px; 
      background-color:#e1e1e1; 
      border:2px solid #e1e1e1;
    }
    li.matched{
      background:#e1e1e1 url('/tags/images/matched.png') 5% 5% no-repeat;
    }
    li.result{
      margin-left:6px; 
      margin-right:6px; 
      width:60px; 
      height:60px; 
      border:3px solid #ff8888;
    }
    p{
      position:relative; 
      float:left; 
      width:16px; 
      height:16px;
      margin:2px; 
      background-color:#f4f4f4; 
      font-size:1pt;
    }
    p.matched{
      background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat;
    }
    p.result{
      width:12px; 
      height:12px; 
      border:2px solid #ff8888;
    }
    .matched_addit{
      background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat;
    }
    .srce{
      padding:16px 0; 
      text-align:center;
    } 
    .srce tt{
      color:#0088ff;
    }
    .tgName{
      position:absolute; 
      top:11px; left:45%; 
      font-size:8pt; 
      color:#b2ada1;
    }
    li .tgName{
      top:24px; 
      left:18px;
    } 
    li p .tgName{
      top:0; 
      left:1px; 
      font-size:7pt;
    }
    .top-element{
      padding-top:20px;
    }
    .clear{clear:both}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~tt class="tgName"~gt~‹ul›~lt~/tt~gt~
  ~lt~ul~gt~
    ~lt~li~gt~~lt~tt class="tgName"~gt~‹li›~lt~/tt~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~tt class="tgName"~gt~‹p›~lt~/tt~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~
  ~lt~ul~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~
  ~lt~ul~gt~
    ~lt~li~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
      ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~
    ~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~li~gt~~lt~/li~gt~
    ~lt~div class="clear" /~gt~
  ~lt~/ul~gt~

  ~lt~div class="clear top-element"~gt~~lt~p class="result"~gt~~lt~/p~gt~ – выбранные с помощью :first-child p-элементы.~lt~/div~gt~
  ~lt~div class="clear"~gt~~lt~p class="matched_addit"~gt~~lt~/p~gt~ – выбранные с помощью :first p-элементы.~lt~/div~gt~

  ~lt~script~gt~
    $('p:first-child').addClass('result');
    $('p:first').addClass('matched');
  ~lt~/script~gt~

~lt~/body~gt~
~lt~/html~gt~

Пример 2

Найдем женщин, стоящих в начале очереди (элементы класса women, находящиеся в начале элементов с классом queue (очередь)):

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    .man, .woman{
      width: 50px;
      height: 25px;
      float: left;
      padding: 12px;
      margin: 5px;
      background-color: #eee;
      font-size: 10pt;
    }
    .queue{
      float: left;
      width: 85px;
      padding: 15px;
      margin: 5px;
      background-color: #eeffee;
      font-size: 14pt;
	  text-align:center;	
	}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div class="queue"~gt~ 
    Колбаса
    ~lt~div class="woman"~gt~Жанна~lt~/div~gt~
    ~lt~div class="man"~gt~Петр~lt~/div~gt~
    ~lt~div class="woman"~gt~Алла~lt~/div~gt~
  ~lt~/div~gt~
  ~lt~div class="queue"~gt~ 
    Хлеб
    ~lt~div class="woman"~gt~Тетя Клава~lt~/div~gt~
    ~lt~div class="woman"~gt~Людмила~lt~/div~gt~
    ~lt~div class="man"~gt~Карл~lt~/div~gt~
  ~lt~/div~gt~
  ~lt~div class="queue"~gt~ 
    Алкоголь
    ~lt~div class="man"~gt~Бродяга Трофим~lt~/div~gt~
    ~lt~div class="man"~gt~Иван~lt~/div~gt~
    ~lt~div class="man"~gt~Колька~lt~/div~gt~
  ~lt~/div~gt~

  ~lt~script~gt~
    $('.woman:first-child').css({'border':'1px solid red'});
 ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

• Остальные селекторы по расположению элементов в своих родителях
• Список всех селекторов
• $( ) — функция jQuery