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.