Cách sử dụng các bộ chọn trong CSS3 phần 2

Phân loại bộ chọn : Có 5 loại

3 . * Bộ chọn theo lớp giả ( Pseudo-classes )

Bộ chọn này được sử dụng để xác định trạng thái đặc biệt của một phần tử, nói nôm na dễ hiểu thì khi tác động vào 1 thẻ nào đó thì nó không còn bình thường nữa , hoặc chúng ta thay đổi trạng thái bình thường mặc định của nó. Các hành động ở đây mà chúng ta có thể làm ví dụ như hơ chuột vào 1 phần tử thì nó sẽ biến đổi như nào , hoặc khi chúng ta tích chọn vào 1 hộp chọn nam hay là nữ chẳng hạn, và còn có hành động khác, chúng ta cũng chú ý là CSS cung cấp cho chúng ta những thay đổi này khá là đơn giản, còn để có thể tác động mạnh và sâu hơn tùy biến được nhiều hơn thì chúng ta cần dùng đến javascript. Chúng ta hãy xem cú pháp của nó như sau.

selector:pseudo-class {
thuộc tính : giá trị ;
}

Trong đó selector có thể là tên thẻ ví dụ thẻ p, h1, h2 , div hoặc tên class và id của phần tử chúng ta muốn style pseudo-class là tên lớp giả chúng ta muốn, ví dụ.

bộ chọn

Trong ví dụ này thẻ p là đối tượng chúng ta chọn và chúng ta muốn khi chúng ta di chuột ( hover ) vào thì màu sắc của nó sẽ chuyển thành màu hồng, chỉ cần style css đơn giản như vậy là chúng ta đã làm được thành công.Theo cách css này thì tất cả các thẻ p khi chúng ta hơ chuột vào đều thành màu hồng hết, như vậy thì không được thẩm mỹ chút nào. Trong thực tế chúng ta ít dùng cách này bởi vì hầu như tất cả các thẻ trong tài liệu của chúng ta đều được đặt theo ID và class từ đó chúng ta có cách kết hợp bộ chọn này theo cách sau ví dụ :

p.hightline:hover {
color : violet ;
}

Ví dụ trên chúng ta có thể hiểu nó là , chọn thẻ p có class là hightline khi hơ chuột vào thẻ p đó thì màu chữ sẽ chuyển sang màu hồng, đây là ví dụ giúp chúng ta hiểu được cách linh hoạt trong việc sử dụng bộ chọn này. Có 1 lưu ý là khi viết css cho dòng p.hightline:hover chúng ta viết liền luôn không có dấu cách ( space ) giữa các ký tự nhé.

Chúng ta cùng đi tìm hiểu thêm 1 số cách chọn khác trong rất hay gặp và được sử dụng trong bộ chọn này.

3.1 Bộ chọn :first-child

bộ chọn

Chúng ta hiểu ví dụ này là chọn phần tử p đầu tiên thuộc class có tên là one và áp cho nó giá trị màu chữ cho nó là màu xanh. Lưu ý khi viết dòng css .one p:first-child chúng ta có 1 khoảng trắng dấu (space ) giữa tên class one và thẻ p.

3.2 Bộ chọn :last-child

bộ chọn

Ví dụ này tương tự như trên xong phần tử chúng ta chọn là phần tử cuối cùng của class. Nhớ lưu ý về cách viết css.

Sau đây chúng ta có thêm 1 trường hợp sử dụng bộ chọn này chúng ta cùng xem và tự nhận ra sự khác biệt nhé.

bộ chọn

Ngoài cách chọn trên chúng ta cũng thường xuyên gặp cách chọn :nth-child( n ):nth-last-child( n ) trong đó n là thứ tự phần con chúng ta muốn chọn được đánh theo số ví dụ như 1 , 2, 3 .... Cách chọn này chúng ta chỉ tham khảo để hiểu còn trong thực tế chúng được ít dùng hơn, vì dùng 2 cách này nó không có tính linh hoạt và nó khá là cứng nhắc, khi phần tử trong thẻ HTML thay đổi thêm hoặc bớt thì các giá trị chúng cũng bị thay đổi theo.

Bộ chọn này còn rất nhiều các lớp giả khác như :only-child , :focus :target ..... các bạn hãy tìm hiểu thêm ở các nguồn khác nữa nhé. Cảm ơn các bạn đã đọc và luôn ghé thăm blog nhỏ nhoi này của mình. Chúc các bạn thành công.

Tag: CSS