Only-child , last child , first-child selector example in jquery

only-child will fetch only those elements that has only one child.for example

<div>
<button>i am only child</button>
</div>

<div>
<button>I have  brother</button>
<button>I have brother</button>
</div>

For only-child
   $("div button:only-child").text("last child").css("border", "2px blue solid "); // for only child
Done:))

 For last-child
 $("div span:last-child")
            .css({ color: "red", fontsize: "140%" })
            .hover(function () {
                $(this).addClass("solast");
            }, function () {
                $(this).removeClass("solast");
            });

For first-child  equivalent to nth-child(1)
 $("div span:first-child")
            .css({ color: "red", fontsize: "140%" })
            .hover(function () {
                $(this).addClass("solast");
            }, function () {
                $(this).removeClass("solast");
            });

First child and last child element structure as follow:

        <div>
            <span>John,</span>
            <span>Karl,</span>
            <span>Brandon,</span>
            <span>Sam</span>
        </div>
        <div>
            <span>Glen,</span>
            <span>Tane,</span>
            <span>Ralph,</span>
            <span>David</span>
        </div>



For nth child selector here  is example :

 <div>
            <ul>
                <li>John</li>
                <li>Karl</li>
                <li>Brandon</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>Sam</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>Glen</li>
                <li>Tane</li>
                <li>Ralph</li>
                <li>David</li>
            </ul>
        </div>

And jquery for that is

  $(document).ready(function () {
            $("ul li:nth-child(2)").append("<span> - 2nd child !</span>")
        });
DONE :)