CSS Selectors

 CSS Selector

CSS selector được sử dụng để tìm (hoặc chọn) các phần tử HTML mà bạn muốn thêm vào các thuộc tính CSS.

Chúng ta có thể chia CSS selector ra thành năm loại:

• Simple selector (chọn các phần tử dựa trên tên, id, class).
• Combinator selector (chọn các phần tử dựa trên một mối quan hệ cụ thể giữa chúng).
• Pseudo-class selector (chọn các phần tử dựa trên một trạng thái nhất định).
• Pseudo-elements selector (chọn và thêm các thuộc tính CSS vào một phần của một phần tử).
• Attribute selector (chọn các phần tử dựa trên một thuộc tính hoặc giá trị của thuộc tính).

Trang này sẽ giải thích về các CSS selector cơ bản nhất.

CSS element Selector

Element selector được sử dụng để chọn các phần tử HTML dựa trên tên của phần tử.

Ví dụ:

Trong ví dụ sau, tất cả các phần tử <p> trên trang sẽ được căn chỉnh giữa, với một màu văn bản là màu đỏ:

p {
    text-align: center;
    color: red;
}

CSS id Selector

id selector sẽ sử dụng thuộc tính id của phần tử HTML để chọn một phần tử cụ thể.

id của một phần tử HTML là duy nhất trong một trang, vậy nên id selector được sử dụng để chọn một phần tử duy nhất.

Để chọn một phần tử với một id cụ thể, chúng ta hãy viết một dấu thăng (#), theo sau nó là id của phần tử.

Ví dụ:

Quy tắc CSS bên dưới sẽ được áp dụng cho phần tử HTML với thuộc tính id="para1":

#para1 {
    text-align: center;
    color: red;
}

Ghi chú: tên của id không thể bắt đầu bằng một số!

CSS class Selector

class selector được sử dụng để chọn các phần tử HTML với một class cụ thể.

Để chọn các phần tử HTML với một class cụ thể, chúng ta hãy viết một dấu chấm (.), theo sau nó là tên của class.

Ví dụ:

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

.center {
    text-align: center;
    color: red;
}

Bạn cũng có thể chỉ rõ rằng chỉ những phần tử HTML cụ thể mới bị ảnh hưởng bởi một class.

Ví dụ:

Trong ví dụ này chỉ các phần tử <p> với thuộc tính class="center" mới có màu chữ là màu đỏ và được căn giữa:

p.center {
    text-align: center;
    color: red;
}

Các phần tử HTML cũng có thể tham chiếu đến nhiều hơn một class.

Ví dụ:

Trong ví dụ này phần tử <p> sẽ được thêm vào các thuộc tính CSS theo thuộc tính class="center" và class="large":

<p class="center large">This paragraph refers to two classes.</p>

Ghi chú: tên của class không thể bắt đầu với một số!

CSS Universal Selector

universal selector (*) được sử dụng để chọn tất cả các phần tử HTML trên trang.

Ví dụ:

Quy tắc CSS bên dưới sẽ ảnh hưởng đến mọi phần tử HTML trên trang:

* {
    text-align: center;
    color: blue;
}

CSS Grouping Selector

grouping selector được sử dụng để chọn tất cả các phần tử HTML với các định nghĩa CSS giống nhau.

Hãy xem đoạn mã CSS sau (các phần tử h1, h2, và p đều có các định nghĩa CSS giống nhau):

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

Sẽ tốt hơn nếu chúng ta nhóm các selector trên lại với nhau, để tối thiểu hóa đoạn mã trên.

Để nhóm các selector trên lại với nhau, chúng ta hãy phân cách mỗi selector trên bằng một dấu phẩy.

Ví dụ:

Trong ví dụ này chúng ta đã nhóm các selector từ đoạn mã ở trên lại với nhau:

h1, h2, p {
    text-align: center;
    color: red;
}