CSS3 - Thêm style cho một phần tử HTML bất kỳ.

Xem hướng dẫn trước về cách style một li bất kỳ trong danh sách.

Đối với thẻ danh sách li. Việc can thiệp một li con ở một vị trí bất kỳ tương đối đơn giản.

Ví dụ tôi có một list sau :

<ul id="erhay-list">
   <li>Vị trí 1</li>
   <li>Vị trí 2</li>
   <li>Vị trí 3</li>
</ul>

Với danh sách này để style một li bất kỳ thì không có gì khó khăn cả. Trong ví dụ về cách đánh số thứ tự trong Popularpost blogger, tôi cũng đã có một hướng dẫn về list kiểu này. Cụ thể, để style cho li ở vị trí đầu tiên chúng ta chỉ cần sử dụng:

ul#erhay-list li:first-child {}

Với những li ở vị trí tiếp theo ta chỉ cần +li vào đằng sau là được. Ví dụ, li ở vị trí tiếp theo (thứ 2) sẽ là 

ul#erhay-list li:first-child + li {}

Tương đối dễ đúng không nào.

CSS3 - Style cho những div có chung class. 

(Ví dụ như trên Asp.net Datalist sẽ lấy ra một danh sách với những bài viết có style giống hệt nhau).

Chẳng hạn tôi có HTML của một danh sách được tạo ra có style giống như sau: 

<div class="lienquan"><a class="video-img" href="http://youtubethumb.blogspot.com/2013/06/bai-ang-1.html" title="Chọn sữa từ kinh nghiệm của nhà sản xuất"><img style="width:120px;height:100px;float:left" src="http://i2.ytimg.com/vi/ueY0MsOrXTQ/mqdefault.jpg"></a><a href="http://youtubethumb.blogspot.com/2013/06/bai-ang-1.html" title="Chọn sữa từ kinh nghiệm của nhà sản xuất">Chọn sữa từ kinh nghiệm của nhà sản xuất</a></div>
<div class="lienquan"><a class="video-img" href="http://youtubethumb.blogspot.com/2013/06/bai-dang-youtube-video.html" title="BB&amp;BG : Cua Gái [ Full ]"><img style="width:120px;height:100px;float:left" src="http://i2.ytimg.com/vi/vCGZ1y1e7lc/mqdefault.jpg"></a><a href="http://youtubethumb.blogspot.com/2013/06/bai-dang-youtube-video.html" title="BB&amp;BG : Cua Gái [ Full ]">BB&amp;BG : Cua Gái [ Full ]</a></div>
<div class="lienquan"><a class="video-img" href="http://youtubethumb.blogspot.com/2013/06/karaoke-nguoi-co-on-remix-khac-viet.html" title="[Karaoke] Người Cô Đơn Remix - Khắc Việt"><img style="width:120px;height:100px;float:left" src="http://i2.ytimg.com/vi/BthOD1uoNqY/mqdefault.jpg"></a><a href="http://youtubethumb.blogspot.com/2013/06/karaoke-nguoi-co-on-remix-khac-viet.html" title="[Karaoke] Người Cô Đơn Remix - Khắc Việt">[Karaoke] Người Cô Đơn Remix - Khắc Việt</a></div>
<div class="lienquan"><a class="video-img" href="http://youtubethumb.blogspot.com/2013/06/minh-yeu-nhau-nhieu-hon-anh-nghi.html" title="Mình đã yêu nhau nhiều hơn anh nghĩ"><img style="width:120px;height:100px;float:left" src="http://i2.ytimg.com/vi/OnyXzPuF2tQ/mqdefault.jpg"></a><a href="http://youtubethumb.blogspot.com/2013/06/minh-yeu-nhau-nhieu-hon-anh-nghi.html" title="Mình đã yêu nhau nhiều hơn anh nghĩ">Mình đã yêu nhau nhiều hơn anh nghĩ</a></div>
<style type="text/css">
.lienquan {
  background: none repeat scroll 0 0 #F7F8F9;
  display: block;
  height: 100px;
  margin-bottom: 4px;
  overflow: hidden;
  width: 230px;
}
a {text-decoration:none}
</style>

Với style như trên tôi có một kết quả hiển thị giống hệt nhau vì những div này chung một class="lienquan". Nhưng đây không phải là kết quả tôi muốn. Tôi muốn bài viết đầu tiên hiển thị nổi bật hẳn lên và khác so với các bài viết còn lại. Giống như hình :

Vậy can thiệp CSS như thế nào để bài viết đầu tiên đó nổi bật hẳn lên như hình. CSS3 có một thuộc tính khá thú vị đó là sử dụng nth-of-type. Với ví dụ trên sẽ áp dụng như sau:

#Chỉnh lại chiều cao, chiều rộng của class="lienquan" áp dụng với div đầu tiên với CSS như sau :

.lienquan:nth-of-type(1) {
  height: 200px !important;
  width: 230px !important;
}

Trong đó (1) là div đầu tiên có class="lienquan".

#Chỉnh lại các thông số hình ảnh, vị trí tiêu đề :

.lienquan:nth-of-type(1) > a.video-img {
  padding: 0 !important;
}
.lienquan:nth-of-type(1) > a {
  padding: 5px;
  width: 230px !important;
}
.lienquan:nth-of-type(1) > a.video-img > img {
  height: 150px !important;
  width: 230px !important;
}

Các phần tử con sẽ được nối tiếp bằng các sử dụng dấu ">" như trên.

Tương tự, để chỉnh div ở vị trí thứ 2 hay thứ 3 bạn hoàn toàn có thể can thiệp được bằng cách đổi (1) thành (2), (3)...(n)

Ngoài ra, nth-of-type còn áp dụng trong danh sách cho các bài viết ở vị trí chẵn và vị trí lẻ. Bạn có thể tham khảo thêm về thuộc tính này tại http://www.w3schools.com/cssref/sel_nth-of-type.asp

Qua hướng dẫn trên, tôi đã hướng dẫn bạn cách tùy chỉnh CSS cho một DIV bất kỳ. 

Minh Anh - Erhay. Vui lòng ghi rõ nguồn Erhay khi bạn phát hành thông tin từ trang này.