Cách xác định bộ chọn của một phần tử

Trong thiết kế web, bộ chọn (selector) là yếu tố quan trọng giúp định dạng và kiểm soát giao diện của các phần tử HTML. Để xác định bộ chọn của một phần tử, bạn có thể sử dụng công cụ Developer Tools của trình duyệt, kiểm tra mã nguồn HTML và tìm thuộc tính id, class, hoặc tên thẻ. Ngoài ra, bạn cũng có thể kết hợp các bộ chọn CSS nâng cao như descendant selectors, attribute selectors, hay pseudo-classes để áp dụng phong cách linh hoạt hơn. Việc hiểu và sử dụng đúng bộ chọn không chỉ giúp tối ưu CSS mà còn cải thiện hiệu suất của trang web.

Cách xác định bộ chọn của một phần tử

Như chúng ta đã biết: “Trong CSS, khi muốn định dạng cho một phần tử thì công việc đầu tiên mà chúng ta cần phải làm đó chính là xác định phần tử mà mình muốn định dạng”

Đối với phương pháp Inline CSS, việc xác định phần tử mà mình muốn định dạng khá là đơn giản, chúng ta chỉ cần đặt thuộc tính style vào bên trong thẻ mở của phần tử, thế là xong !

Tuy nhiên, đối với phương pháp Internal CSS & External CSS thì việc xác định phần tử mà mình muốn định dạng là một điều tương đối khó, bởi vì nó cần phải thông qua bộ chọn.

Xác định bộ chọn của phần tử dựa theo id

– Dưới đây là cú pháp dùng để xác định bộ chọn của một phần tử dựa theo id của nó.

#id

Ví dụ:

– Chọn phần tử có id là css

---

#css{
    color:blue;
}

Xem ví dụ

Xác định bộ chọn của phần tử dựa theo class

– Dưới đây là cú pháp dùng để xác định bộ chọn của một phần tử dựa theo tên class của nó.

.class

Ví dụ:

– Chọn các phần tử có class là html

---

.html{
    color:blue;
}

Xem ví dụ

Xác định bộ chọn của phần tử dựa theo tên thẻ

– Dưới đây là cú pháp dùng để xác định bộ chọn của một phần tử dựa theo tên thẻ.

tagname

Ví dụ:

– Chọn các phần tử <h1>

---

h1{
    color:blue;
}

Xem ví dụ

Xác định bộ chọn của phần tử dựa theo thuộc tính HTML

– Dưới đây là cú pháp dùng để xác định bộ chọn của một phần tử dựa theo thuộc tính HTML.

[attribute]

Ví dụ:

– Chọn phần tử có chứa thuộc tính title

---

[title]{
    color:blue;
}

Xem ví dụ

Xác định bộ chọn của phần tử dựa theo giá trị thuộc tính HTML

– Đối với việc xác định bộ chọn của một phần tử dựa theo “giá trị thuộc tính HTML” thì nó thường được chia ra thành sáu trường hợp (tương ứng với sáu loại bộ chọn)

Trường hợp 1:
– Giá trị của thuộc tính phải hoàn toàn trùng khớp với chuỗi ký tự được chỉ định.

[attribute=value]

– Ví dụ: Chọn phần tử có thuộc tính title với giá trị là yeu

[title="yeu"]{
    color:red;
}

Xem ví dụ

Trường hợp 2:
– Giá trị của thuộc tính phải có chứa từ (word) được chỉ định.

[attribute~=value]

– Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải có chứa từ yeu

[title~="yeu"]{
    color:blue;
}

Xem ví dụ

Trường hợp 3:
– Giá trị của thuộc tính phải có chứa chuỗi ký tự được chỉ định.

[attribute*=value]

– Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải có chứa chuỗi yeu

[title*="yeu"]{
    color:blue;
}

Xem ví dụ

Trường hợp 4:
– Giá trị của thuộc tính phải được bắt đầu bởi chuỗi ký tự được chỉ định.

[attribute^=value]

– Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải bắt đầu bằng chuỗi tinh

[title^="tinh"]{
    color:blue;
}

Xem ví dụ

Trường hợp 5:
– Giá trị của thuộc tính phải được kết thúc bởi chuỗi ký tự được chỉ định.

[attribute$=value]

– Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải kết thúc bởi chuỗi yeu

[title$="yeu"]{
    color:blue;
}

Xem ví dụ

Trường hợp 6:
– Giá trị của thuộc tính phải được bắt đầu bởi một từ (word) được chỉ định.

– Lưu ý: Từ (word) đó phải là độc lập hoặc được nối tiếp bởi một dấu gạch nối.

[attribute|=value]

– Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải được bắt đầu bởi từ yeu

[title|="yeu"]{
    color:blue;
}

Xem ví dụ

Xác định bộ chọn của phần tử dựa theo nhiều yếu tố

– Để xác định bộ chọn của một phần tử dựa theo nhiều yếu tố thì trước tiên chúng ta cần phải xác định bộ chọn của phần tử dựa theo từng yếu tố, sau đó ghép tất cả các bộ chọn lại với nhau.

Ví dụ:

– Để xác định bộ chọn của phần tử <h1>, có class là big, có thuộc tính title với giá trị là xin chao thì bộ chọn sẽ được viết như sau:

---

h1.big[title="xin chao"]{
    color:blue;
}

Xem ví dụ

– Lưu ý: Tên thẻ phải luôn được đặt ở vị trí đầu tiên.

Chọn tất cả các phần tử

– Dưới đây là cú pháp dùng để chọn hết tất cả các phần tử.

*

Ví dụ:

---

*{
    border:1px solid red;
}

Xem ví dụ