Псевдокласс :first фактически выбирает первый элемент, который был возвращен в вашем списке. Например, $('div span:first') вернет только самый первый прогон под первым div, который был возвращен.
Псевдокласс :first-child выбирает первый элемент под определенным родителем, но возвращает столько элементов, сколько есть первых детей. Например, $('table tr td:first-child') возвращает первую ячейку каждой отдельной строки.
Когда вы использовали :first, он возвращал только первую ячейку первой строки, которая была выбрана.
Для получения дополнительной информации обратитесь к документации jQuery: