:first-of-type

Đăng bởi: Admin


Định nghĩa và sử dụng

  • Bộ chọn :first-of-type: chọn thành phần con đầu tiên hoặc duy nhất trong các thành phần cha.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.9
$(':first-of-type')
$('tag:first-of-type')

Ví dụ

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p:first-of-type').css('background-color','#cccccc');
});
</script>
</head>

<body>
<p>p tự do đầu tiên</p>
<div>
    <ul>
        <li>
       	    <p>p duy nhất của li</p>
        </li>
        <li>
       	    <p>p duy nhất của li</p>
        </li>
    </ul>
    <p>p đầu tiên của div</p>
    <p>p thứ 2 của div</p>
    <ul>
        <li>
            <p>p đầu tiên của li</p>
            <p>p cuối cùng của li</p>
        </li>
    </ul>
    <p>p thứ 3 của div</p>
    <p>p cuối cùng của div</p>
</div>
<p>p tự do thứ 2</p>
<p>p tự do cuối cùng</p>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy những thành phần <p> ở vị trí đầu tiên hoặc duy nhất của các thành phần cha đã được chọn.


vncoder logo

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!