CSS Element Type Selector: Bộ chọn theo kiểu phần tử

Bộ chọn kiểu phần tử (element type selector) trong CSS được dùng để chọn tất cả các phần tử của một loại (tag name) cụ thể.

Cú pháp

element {
    /* declarations */
}

Ví dụ 1: Style cho div và li

<!DOCTYPE html>
<html>
<head>
<style>
li {
    list-style: none;
    margin: 5px;
    border-bottom-style: dotted;
}
div {
    box-shadow: inset 0 0 8px plum;
    padding: 36px;
}
</style>
</head>
<body>
<div>
    <pre> (╪)(╪) /</pre>
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

Ví dụ 2: Style cho div tròn và li căn giữa

<!DOCTYPE html>
<html>
<head>
<style>
li {
    text-align: center;
    list-style: none;
    margin: 5px;
    padding: 5px;
    box-shadow: inset 0 0 15px yellowgreen;
}
div {
    box-shadow: inset 0 0 8px orange;
    padding: 36px;
    width: 30%;
    border-radius: 50%;
}
</style>
</head>
<body>
<div>
    <ul>
        <li>Hello</li>
        <li>Guys</li>
    </ul>
</div>
</body>
</html>

Đặc điểm quan trọng

• Áp dụng cho tất cả phần tử có tag name khớp trên toàn trang
• Độ đặc hiệu (specificity) thấp: 0,0,1 — dễ bị ghi đè bởi class, id, attribute selector
• Thường dùng cho CSS reset / normalize / base styles

Kết hợp với các selector khác

/* Tất cả p trong article */
article p { line-height: 1.6; }

/* Tất cả img không có class */
img:not([class]) { max-width: 100%; height: auto; }

/* Tất cả input type text */
input[type="text"] { border: 1px solid #ccc; }

Best Practice

Nên hạn chế dùng element selector cho style phức tạp, thay vào đó dùng class (BEM, utility-first) để dễ bảo trì và tránh xung đột style không mong muốn.