Hôm nay HOCCODE.NET sẽ hướng dẫn các bạn cách áp dụng css3: First-child, last-child và nth-child


Chúng ta có 1 đoạn code hiển thị danh mục như sau:

<div>
<ul>
    <li><a href="trang-chu.html">Trang chủ</a></li>
        <li><a href="tin-tuc/xa-hoi.html">Xã hội</a></li>
        <li><a href="tin-tuc/doi-song.html">Đời sống</a></li>
        <li><a href="tin-tuc/giao-duc.html">Giáo dục</a></li>
        <li><a href="tin-tuc/suc-khoe.html">Sức khỏe</a></li>
        <li><a href="tin-tuc/giai-tri.html">Giải trí</a></li>
        <li><a href="tin-tuc/cong-nghe.html">Công nghệ</a></li>
        <li><a href="lien-he.html">Liên hệ</a></li>
    </ul>
</div>

<div class="category-bound">

<ul>

     <li><a href="trang-chu.html">Trang chủ</a></li>

        <li><a href="tin-tuc/xa-hoi.html">Xã hội</a></li>

        <li><a href="tin-tuc/doi-song.html">Đời sống</a></li>

        <li><a href="tin-tuc/giao-duc.html">Giáo dục</a></li>

        <li><a href="tin-tuc/suc-khoe.html">Sức khỏe</a></li>

        <li><a href="tin-tuc/giai-tri.html">Giải trí</a></li>

        <li><a href="tin-tuc/cong-nghe.html">Công nghệ</a></li>

        <li><a href="lien-he.html">Liên hệ</a></li>

    </ul>

</div>

1. First-child: được áp dụng cho đối tượng đầu tiên trong 1 danh sách lặp

Ví dụ: muốn đối tượng li đầu tiên trong đoạn code trên có nền là màu đỏ

.category-bound ul li:first-child{background:#f00;}

Demo: http://jsfiddle.net/tientm/pp8KH/

2. Last-child: được áp dụng cho đối tượng cuối cùng trong danh sách lặp

Ví dụ: muốn đối tượng li cuối cùng trong đoạn code trên có nền là màu xanh

.category-bound ul li:last-child{background:#090;}

Demo: http://jsfiddle.net/tientm/SRnwW/

3. Nth-child: được áp dụng cho các đối tượng theo một chu kỳ nhất định trong danh sách lặp hoặc cho 1 đổi tượng ở vị trí xác định

3.1. Áp dụng cho 1 đối tượng có vị trí xác định trong danh sách lặp

Ví dụ: muốn đối tượng thứ 6 trong danh sách lặp có màu nền là màu đen

.category-bound ul li:nth-child(6){background:#000;}

Demo: http://jsfiddle.net/tientm/8SH35/

3.2. Áp dụng cho 1 chu kỳ nhất định trong danh sách lặp

Cấu trúc: nth-child(an+b) trong đó

a: là số đối tượng cho 1 vòng chu kỳ (là số nguyên)

n: là đại diện cho số thứ tự của chu kỳ (1, 2, 3, 4,.....)

b: là số bù thêm trong chu kỳ (ví dụ: đối tượng thứ 2 trong chu kỳ là +2, đối tượng thứ 4 trong chu kỳ là +4)

Ví dụ: muốn có một vòng lặp 4 màu nền theo thứ tự: đỏ → vàng → cam → xanh lá

.category-bound ul li{background:#f00;} /*đây là background mặc định - áp dụng cho tất cả*/

.category-bound ul li:nth-child(4n+2){background:#FFBF00;} /*áp dụng cho đối tượng thứ 2 trong chu kỳ gồm 4 đối tượng*/

.category-bound ul li:nth-child(4n+3){background:#FF8601;} /*áp dụng cho đối tượng thứ 3 trong chu kỳ gồm 4 đối tượng*/

.category-bound ul li:nth-child(4n+4){background:#B3D52C;} /*áp dụng cho đối tượng thứ 4 trong chu kỳ gồm 4 đối tượng*/

Demo: http://jsfiddle.net/tientm/HzRLu/1/


Hệ thống Facebook Marketing Online

BÌNH LUẬN
Đăng ký nhận bài viết từ Học Code
Chia sẻ Học Code
Quảng cáo tài trợ
Dịch vụ Marketing Online
Series Hay