DANH MỤC: CSS

Bài 3: 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.

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

The best way to learn is to share

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia