Bộ chọn trong CSS

Các bộ chọn CSS

Các bộ chọn CSS (selector) cho phép bạn chọn và thao tác với các phần tử HTML.

Bộ chọn được sử dụng để "tìm" (hoặc chọn) phần tử HTML dựa trên id, class, loại thẻ, các thuộc tính, và nhiều thứ khác của phần tử HTML.

Bộ chọn phần tử

Bộ chọn Phần tử (element selector) dựa vào tên của các phần tử (thẻ) HTML.

Bạn có thể chọn tất cả các phần tử <p> trên một trang như thế này (trong trường hợp này, tất cả các văn bản nằm trong thẻ <p> sẽ được căn giữa và có màu đỏ):

Ví dụ

p  {

text-align: center;

color: red;

}

Try it yourself »

Bộ chọn id

Bộ chọn id sử dụng thuộc tính id của một phần tử HTML để chỉ định cụ thể một phần tử HTML nào đó.

Một id nên là duy nhất trong một trang, do đó bộ chọn id được sử dụng nếu bạn muốn áp dụng kiểu cho duy nhất một phần tử trên trang.

Để chọn một phần tử với một id cụ thể, chỉ cần viết kí hiệu # trước id (giá trị của thuộc tính id) của phần tử đó.

Quy tắc kiểu dưới đây sẽ được áp dụng cho các phần tử HTML với id = "para1":

Ví dụ:

#para1 {

text-align: center;

color: red;

}

Try it yourself »

Bộ chọn class

Bộ chọn class (class selector) chọn các phần tử có thuộc tính class với một giá trị cụ thể.

Để chọn các phần tử với một class cụ thể, chỉ cần viết thêm dấu chấm (.) trước tên của class:

Trong ví dụ dưới đây, tất cả các phần tử HTML với class="center" sẽ có văn bản được căn giữa và màu đỏ.

Ví dụ

.center {

text-align: center;

color: red;

}

Try it yourself »

Bạn cũng có thể xác định các phần tử HTML cụ thể chịu tác động thông qua class.

Trong ví dụ dưới đây, tất cả các phần tử <p> với class="center" sẽ có văn bản được căn giữa và màu đỏ:

Ví dụ:

p.center {

text-align: center;

color: red;

}

Try it yourself »

Bộ chọn nhóm

Nếu bạn có các phần tử được định nghĩa kiểu giống nhau, ví dụ:

h1 {

text-align: center;

color: red;

}

h2 {

text-align: center;

color: red;

}

p  {

text-align: center;

color: red;

}

Bạn có thể nhóm các bộ chọn này, để giảm bớt mã.

Để nhóm các bộ chọn, phân tách các bộ chọn bởi dấu phẩy (,).

Trong ví dụ dưới đây, chúng ta đã nhóm các bộ chọn từ mã ở trên:

Ví dụ:

h1, h2, p {

text-align: center;

color: red;

}

Try it yourself »

Tự làm bài tập!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » 

CodeLean.vn

Nguồn: w3school.org