CSS Selectors

CSS Selectors là gì?

Selector (bộ chọn) là phần đầu tiên của một quy tắc CSS, cho trình duyệt biết phần tử HTML nào cần được áp dụng kiểu. Hiểu rõ selector giúp bạn viết CSS chính xác và tránh xung đột kiểu.

Các loại selector cơ bản

Selector theo thẻ (Type selector)

Chọn tất cả phần tử có tên thẻ tương ứng.

p { color: navy; }
h1 { font-size: 2rem; }

Selector theo class (.)

Chọn các phần tử có thuộc tính class khớp. Một phần tử có thể có nhiều class.

.highlight { background: yellow; }
.box.active { border: 2px solid green; }  /* Phần tử vừa có .box vừa có .active */

Selector theo ID (#)

Chọn phần tử có id duy nhất trong trang. Không nên dùng nhiều id trùng.

#header { position: sticky; top: 0; }

Selector toàn cục (*)

Chọn tất cả phần tử. Thường dùng để reset hoặc áp dụng box-sizing.

* { box-sizing: border-box; }

Nhóm selector (,)

Áp dụng cùng quy tắc cho nhiều selector cùng lúc.

h1, h2, h3 { font-family: sans-serif; }

Selector kết hợp (Combinator selectors)

nav a { color: white; }           /* Mọi <a> trong <nav> */
ul > li { list-style: disc; }     /* Chỉ <li> con trực tiếp của <ul> */
h2 + p { margin-top: 0; }         /* <p> ngay sau <h2> */
h2 ~ p { color: #666; }           /* Mọi <p> sau <h2> cùng cấp */

Selector theo thuộc tính

input[type="email"]   { border-color: blue; }
a[href^="https"]      { color: green; }      /* Link bắt đầu bằng https */
img[src$=".png"]      { border: 1px solid #ccc; }
a[href*="example"]    { font-weight: bold; }

Độ ưu tiên (Specificity)

Khi nhiều quy tắc cùng tác động lên một phần tử, quy tắc có specificity cao hơn sẽ thắng.

• A = số lượng ID selector (#)
• B = số lượng class, attribute, pseudo-class (., [attr], :hover)
• C = số lượng type selector và pseudo-element (div, ::before)

!important ghi đè tất cả — dùng cẩn thận và hạn chế tối đa.

Demo: Các loại selector

<h2>Tiêu đề (type selector)</h2>
<p class="highlight">Đoạn có class .highlight</p>
<p class="highlight special">Có cả .highlight và .special</p>
<p id="unique">ID duy nhất #unique</p>
<div class="container">
  <p>Con trực tiếp của .container</p>
  <div>
    <p>Cháu của .container (descendant)</p>
  </div>
</div>
<p>Đoạn văn bình thường</p>

/* Type selector */
h2 { color: #4472c4; }

/* Class selector */
.highlight { background: #fff3cd; padding: 4px 8px; border-radius: 4px; }

/* Gộp class */
.highlight.special { border-left: 4px solid #ff9900; }

/* ID selector */
#unique { color: #c00; font-weight: bold; }

/* Descendant vs child */
.container p { background: #e3f0ff; margin: 4px 0; padding: 4px; }
.container > p { border: 2px solid #4472c4; }

Demo: Selector theo thuộc tính

<form style="display:grid;gap:8px;max-width:320px">
  <input type="text" placeholder="Text input">
  <input type="email" placeholder="Email input" required>
  <input type="password" placeholder="Password">
  <input type="submit" value="Submit">
  <input type="button" value="Button (disabled)" disabled>
  <a href="https://example.com">Link https</a>
  <a href="http://example.com">Link http</a>
  <a href="/dev/web/">Link nội bộ</a>
</form>

/* Selector thuộc tính */
input { display: block; padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%; }

input[type="email"] { border-color: #4472c4; }
input[type="email"][required] { border-width: 2px; }

input[type="submit"] { background: #4472c4; color: white; cursor: pointer; border: none; }
input[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Selector theo giá trị href */
a[href^="https"] { color: green; }
a[href^="http:"] { color: orange; }
a[href^="/"]     { color: #4472c4; }