công ty thiết kế website tốt nhất

Bình thường nếu bạn muốn gán thêm một style riêng cho một đối tượng ở đầu cuối hoặc vị trí bất kỳ trong danh sách thì bạn phải tiến hành code để có thể xử lý gán được style đó vào vị trí mong muốn. Nhưng nay với sự hỗ trợ mạnh mẽ của CSS3 việc đó đã trở nên đơn giản hơn rất nhiều, các bạn cùng xem qua bài này để hiểu rõ hơn nhé. 

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

<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/