Selectors Trong CSS

Sau 2 bài lý thuyết về css bài này chúng ta sẽ bắt đầu tìm hiểu về thực hành css(2). Cụ thể là về selectors

1, Selectors là gì?

-Selector là các lựa chọn dùng để truy vấn đến các thẻ HTML nhằm tác động vào chúng.

VD: Như chúng ta muốn selector tất cả các thẻ p trong HTML thì sẽ selector như sau:

p{ property: value; }

2, Các dạng Selectors.

Selector all

-Loại selector này sẽ tác động đến tất cả các thẻ HTML trên trang web.

Cú Pháp:

*{ property: value; }

VD: CSS tất cả các thẻ HTML đều có chữ màu đỏ.

*{ color: red; }

Xem Kết Quả

Selector TagName

-Loại CSS này sẽ tác động đến các thẻ HTML có tag name mà nó quy định.

Cú Pháp:

tagName{ property: value; }

Trong đó: tagName là các thẻ HTML mà chúng ta muốn tác động.

VD: CSS cho tất cả các thẻ P đều có chữ màu đỏ.

p{ color: red; }

Xem Kết Quả

Slector Class

-Loại selector này sẽ tác động đến tất cả các thẻ HTML có class mà nó quy định.

Cú Pháp:

.ClassName{ property: value; }

Trong đó: className là tên của class mà chúng ta muốn tác động.

VD: CSS cho tất cả các thẻ có class là banner có chữ màu đỏ.

.banner{ property: value; }

Xem Kết Quả

Select ID

-Loại selectors này sẽ tác động đến tất cả các thẻ HTML có id mà nó quy định.

Cú pháp:

#id{ property: value; }

Trong đó: id là tên id của thẻ HTML mà chúng ta muốn tác động.

VD: CSS cho tất cả các thẻ có id là banner có chữ màu đỏ.

#banner{ color: red; }

Xem Kết Quả

Select phân cấp

-Loại css này sẽ cho phép chúng ta css vào các thẻ HTML theo cấp cha con.

Cú Pháp:

cha con chau... n{ property: value; }

Trong đó: cha, con, chau,..., n là các tác động đến từng thẻ theo cấp từ trái qua phải.

VD: CSS cho tất cả các thẻ p bên trong thẻ div.

div p{ color: red; }

Xem Kết Quả

Slector nhiều thẻ

-Loại này sẽ cho phép chúng ta css cho nhiều thẻ mà chúng ta muốn định dạng như nhau mà không phải viết lại css.

Cú pháp:

tag1, tag2 ,..., tagn{ /**/ }

VD: CSS cho thẻ có class banner và id banner đều có màu chữ đỏ.

.banner, #banner{ color: red; }

Xem ví dụ

Các dạng khác

-Chọn tất cả các thẻ p có class là banner.

p.banner{ }

Xem ví dụ

-Chọn thẻ div kế sau thẻ p.

p + div{ /**/ }

Xem ví dụ

-Chọn thẻ li đầu tiên trong thẻ ul.

ul li:first-child{ /**/ }

Xem ví dụ

-Chọn ký tự đầu tiên của các thẻ li trong ul.

p:first-letter{ /**/ }

Xem ví dụ

-Chọn dòng đầu tiên của các thẻ li trong ul.

ul li:first-line{ /**/ }

Xem ví dụ

-Chọn những thẻ a có thuộc tính target.

a[target]{ /**/ }

Xem ví dụ

-Chọn những thẻ có class dạng bit-*

[class*='bit-']{ /**/ }

Xem ví dụ

Cập nhật thêm...

3, Lời kết.

-Phần trên mình mới chỉ nhớ ra bằng ý kiểu selectors css thôi, còn một vài dạng selectors khác nữa mình sẽ cập nhật thêm.