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

Фильтрует набор выбранных элементов, оставляя только те элементы, которые первыми будут встречены в своих родителях. Приведем пример. Выделим красным шрифтом все span-элементы, которые первыми встречаются в своих родителях:

~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~
    b{
      font-weight: normal;
    }
    div{
      border: 1px solid #bbb;
      margin: 10px; 
      padding: 5px;
    }
    span.fot{ 
      color: red; 
      font-size: 120%; 
      font-style: italic; 
    }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div~gt~
    ~lt~span~gt~Corey,~lt~/span~gt~
    ~lt~span~gt~Yehuda,~lt~/span~gt~
    ~lt~span~gt~Adam,~lt~/span~gt~
    ~lt~span~gt~Todd~lt~/span~gt~
  ~lt~/div~gt~
  ~lt~div~gt~
    ~lt~b~gt~Nobody,~lt~/b~gt~
    ~lt~span~gt~Jörn,~lt~/span~gt~
    ~lt~span~gt~Scott,~lt~/span~gt~
    ~lt~span~gt~Timo~lt~/span~gt~
  ~lt~/div~gt~

  ~lt~script~gt~
    $('span:first-of-type').addClass('fot');
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Чтобы понять, почему во втором div'е был выбран второй элемент, нужно посмотреть html этого примера. Все дело в том, что первый элемент (тот, который с текстом Nobody), не является span'ом.

Ссылки

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