: первый ребенок и: последний ребенок

Question

Я действительно не понимаю идею :first-child и :last:child. Можете ли вы просто показать пример, который разъясняет эти два фильтра?

Answer 1

Демо

1. HTML

<ul>
    <li>First</li>
    <li>Child</li>
    <li>Child</li>
    <li>Child</li>
    <li>Last</li>
</ul>

2. CSS

.red{
    color: red;
}

.blue{
    color: blue
}

3. JQuery

$('ul :first-child').addClass('red');
$('ul :last-child').addClass('blue');

В этом случае класс css red будет добавлен к первому элементу li, тогда как класс css blue будет добавлен к последнему элементу li.

Answer 2

http://jsfiddle.net/mMYrf/6/

Если у вас есть много элементов, вы можете напрямую выбрать последний и первый из них, независимо от того, сколько их. Пример http://jsfiddle.net/mMYrf/6/

Зачем тебе это использовать? Потому что, если у вас есть сетка элементов, вы можете захотеть закруглить углы на первом и последнем элементе. Возможно, вам не нужно поле для первого или последнего элемента и т. Д.:)

Answer 3

 <ul>
<li>
    <a><img src="mysource" alt="my alt tag 1"/></a>
</li>
<li>
    <a><img src="mysource" alt="my alt tag 2"/></a>
</li>
<li>
    <a><img src="mysource" alt="my alt tag 3"/></a>
</li>
<li>
    <a><img src="mysource" alt="my alt tag 4"/></a>
</li>
</ul>

$("ul li:last-child) даст вам последнее:

<li>
        <a><img src="mysource" alt="my alt tag 4"/></a>
    </li>

он сканирует, чтобы найти последнего ребенка в диапазоне.

то же самое касается первого ребенка

Answer 4

Это не о jQuery, а о CSS: : first-child и: last-child .