Phân biệt các loại CSS Selector và cách xác định độ ưu tiên

Để có thể áp dụng các thuộc tính CSS vào thẻ HTML bạn cần thông qua CSS Selector.

Vậy có mấy loại CSS Selector?

Cách phân biệt chúng như thế nào?

Đặc biệt khi có nhiều hơn 1 CSS Selector cùng style cho 1 thẻ HTML thì loại nào sẽ được ưu tiên?

Hãy cùng tìm hiểu bài viết dưới đây.

Các loại CSS Selector và cách phân biệt

Chúng ta có thể chia CSS Selector thành 6 loại:

• Type selector
• Id selector
• Class selector
• Attribute selector
• Pseudo class selector
• Pseudo element selector

Cùng tìm hiểu từng loại và cách nhận biết đơn giản dưới đây:

Type selector

Type selector giúp bạn lựa chọn phần tử HTML theo tên của thẻ

Ví dụ: p, span, h1, a,…

Cách nhận biết cực kỳ đơn giản, selecter chỉ có duy nhất tên của thẻ HTML

/*Type Selector*/
p{
    color: orange;
}
span{
    font-weight: bold;
}

Id selector

Id selector giúp bạn lựa chọn phần tử HTML theo thuộc tính id

Ví dụ: #hotline, #row, #col,…

Cách nhận biết: Selector bắt đầu bằng dấu thăng #

/*Id Selector*/
#hotline{
    color: red;
}
#row{
    width: 200px;
}

Class selector

Class selector giúp bạn lựa chọn phần tử HTML theo thuộc tính class

Ví dụ: .price, .name,…

Cách nhận biết: Selector bắt đầu bằng dấu chấm .

/*Class Selector*/
.price{
    padding: 10px;
}
.name{
    line-height: 10px;
}

Attribute selector

Attribute selector giúp bạn lựa chọn phần tử dựa trên thuộc tính và giá trị của thuộc tính đó

Ví dụ: a[rel=nofollow], span[name=price],…

Cách nhận biết: Selector có dấu ngoặc vuông [ ]

/*Attribute Selector*/
a[rel=nofollow]{
    text-decoration: line-through;
}
span[name=price]{
    color: red;
}

Pseudo class selector

Pseudo class selector giúp bạn chọn phần tử dựa trên một trạng thái nhất định của phần tử đó

Ví dụ: div:hover, a:active, p:first-child,…

Cách nhận biết: Selector có 1 dấu hai chấm :

/*Pseudo class Selector*/
a:active{
    color: orange;
}
p:first-child{
    background-color: yellow;
}

Pseudo element selector

Pseudo element selector giúp bạn lựa chọn một phần của một phần tử

Ví dụ: p::first-line, p::first-letter, h1::before, h1::after,…

Cách nhận biết: Selector có 2 dấu hai chấm ::

/*Pseudo element Selector*/
p::first-letter{
    font-size: 24px;
}
h1::before{
    content: url(list.jpg);
}

Xác định mức độ ưu tiên của CSS Selector

Style nào có độ ưu tiên cao hơn, hiển nhiên sẽ đè lên các style khác và áp dụng lên phần tử được chọn.

Trường hợp độ ưu tiên bằng nhau, code phía dưới sẽ đè lên code phía trên, code bên phải sẽ đè lên code bên trái.

Độ ưu tiên của các CSS Selector được xác định như sau:

Lưu ý: *, [space], ~, >, + và :not(selector) có độ ưu tiên bằng 0

Ví dụ ta có đoạn mã HTML và CSS sau:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xác định độ ưu tiên CSS Selectors</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="id1" class="class1">ABC</div>
</body>
</html>

File style.css

/*ype selector*/
div {
    background-color: red;
}

/*id selector*/
#id1 {
    background-color: blue;
}

/*class selector*/
.class1 {
    background-color: yellow;
}

/*attribute selector*/
div[class=class1] {
    background-color: pink;
}

/*pseudo class selector*/
div:hover {
    background-color: black;
}

/*type selector*/
div {
    background-color: green;
}

Hãy chạy thử xem kết quả thế nào!

Ngoài ra: inline CSS có mức độ ưu tiên là 1000 và !important có mức độ ưu tiên là 10.000.

Vì thế khi trong HTML và CSS có xuất hiện thuộc tính style=”” trong thẻ mở hoặc giá trị !important thì sẽ được ưu tiên xếp chồng lên các CSS khác.