Selector chọn phần tử trong CSS

• Selector trong CSS là gì?
• Nhóm các selector thành danh sách
• Selector cơ bản
• Chọn tất cả *
• Chọn theo loại (thẻ) phần tử HTML
• Chọn theo class và id trong CSS
• Chọn theo thuộc tính phần tử HTML
• Selector kết hợp
• Chọn phần tử con
• Chọn phần cùng cha phía sau
• Chọn dải phần tử cùng cha phía sau
• Chọn phần tử con, cháu ...
• Tổng kết - selector CSS

Selector trong cú pháp CSS

Selector trong CSS là một phần của cú pháp CSS, nó cho biết bạn chọn phần tử nào trong HTML mà mã CSS sẽ áp dụng vào.

Ví dụ, có code CSS như sau:

p.thongtin {
    border: 1px solid red;
    padding: 5px;
    background: lightskyblue;
    text-align: center;
}

Như đã biết các quy tắc (thuộc tính) CSS viết trong cặp ngoặc nhọn {}, những quy tắc này sẽ áp dụng cho phần tử HTML nào, đó là các phần tử <p> có class là thongtin. Trong cú pháp trên p.thongtin gọi là selector.

Chỉ các phần tử xác định được bởi selector mới áp dụng code CSS viết trong nó. Có nhiều phần tử <p> nhưng chỉ phần tử nào có class là thongtin mới áp dụng CSS trên. Ví dụ HTML sau:

<p class="thongtin">CSS Selector là chọn phần tử HTML, có nhiều cách chọn phần tử.</p>
<p>Chọn theo class của phần tử là một cách.</p>

Kết quả là:

Nhóm nhiều selector

Bạn muốn áp dụng code CSS giống nhau cho nhiều loại phần tử, mà mỗi phần tử đó chỉ xác định được qua một selector. Như đoạn code trên CSS áp dụng cho thẻ p có class là thongtin bạn cũng muốn áp dụng cho thẻ <div> có class là infomation, thì bạn có thể viết.

p.thongtin, div.infomation {
    border: 1px solid red;
    padding: 5px;
    background: lightskyblue;
    text-align: center;
}
/* Tránh phải viết riêng cho từng selector khi CSS giống nhau
p.thongtin {
    ...
}
div.information {
    ...
}
*/

Như vậy bạn có thể nhóm nhiều selector thành một danh sách, mỗi selector cách nhau bởi dấu phảy.

Sau đây là các cách viết selector cơ bản, cần hiểu nó trước khi đến các selector phức tạp

Chọn phần tử cơ bản - Selector cơ bản trong CSS

Chọn tất cả

Để chọn tất cả (mọi) phần tử HTML dùng ký hiệu sao *, ví dụ:

/* Tất cả phần tử trong HTML đều có font chữ sans-serif, và cỡ chữ 16px */
* {
    font-family: sans-serif;
    font-size: 16px;
}

Chọn theo tên thẻ phần tử HTML

Để chọn tất cả các phần tử cùng loại (cùng thẻ HTML) bạn chỉ cần viết tên thẻ của phần tử đó. Như div, span, p, strong, a, img ...

/* Tất cả các phần tử thẻ a */
a {
    color: blue;
}

Chọn theo class và id của phần tử HTML

Trong các phần tử HTML đều có thể thiết lập giá trị cho thuộc tính class và id cho nó. Nếu phần tử có các thuộc tính này, nó có thể được chọn ra trong CSS.

Chọn theo class thì bạn viết .ClassName (dấu chấm sau đó là giá trị class), chọn theo id thì viết #id (dấu thăng sau đó là giá trị ID).

Ví dụ có HTML sau:

<label class="gioithieu otherclass">Tên của bạn:</label>
<input type="text" id="username">

CSS để chọn theo class gioithieu và ID username có thể viết:

/* Tất cả các phần tử có class: gioithieu */
.gioithieu {
    text-color: green;
}

/* Phần tử có id là username */
#username {
    font-weight: bold;
}

Chọn theo thuộc tính phần tử HTML

Như bạn biết, một phần tử HTML khi viết nó có các thuộc tính ngoài thuộc tính id và class (hai thuộc này cách chọn đã nói ở trên), có các thuộc tính thuộc về đặc tính phần tử như img có thuộc tính src, a có thuộc tính href, target ... có các thuộc tính tên bất kỳ do bạn thêm vào như mydata, abc ...

Trong CSS hoàn toàn có thể chọn ra phần tử HTML căn cứ theo thuộc tính đó có hay không, hoặc thuộc tính đó có giá trị là gì. Sau đây là một số cách viết selector theo thuộc tính, giả sử thuộc tính là attrName

/* Chọn các phần tử có thuộc tính type */
[type] {
    font-weight: bold;
}

/* Chọn các phần tử có thuộc tính type với giá trị là email */
[type="email"] {
    font-weight: bold;
}

/* Chọn các phần có thuộc tình href bắt đầu bằng https://abc.com */
[href^="https://abc.com"] {
    font-weight: bold;
}

Kết hợp các selector

Để khoanh vùng phạm vi các phần tử được chọn chính xác hơn, thường sẽ kết hợp nhiều selector. Dưới đây là một số cách kết hợp:

Chọn phần tử con

Bạn có thể kết hợp 2 selector lại bằng ký hiệu lớn hơn > (ví dụ select1 > selector2) để cho biết chọn phần tử con selector2, phải có cha là phần tử xác đinh bởi selector1. Lưu ý là phần tử con nằm trực tiếp trong phần tử cha và quy tắc viết được cho nhiều selector

Ví dụ:

/* Chọn phần tử a, a phải là con của p (những phần tử a không nằm trực tiếp
    trong p sẽ không được chọn */
p > a {
    ...
}

/* chọn phần tử a có class là linkout, a phải là con của p, p đó phải là con của
    phần từ có class là .cardinfo */
.cardinfo > p > a .linkout {
    ...
}

Chọn phần tử cùng cha phía sau

Sử dụng dấu cộng + để kết hợp 2 selector. Ví dụ selector1 + selector2, thì quy tắc đó là selector1 xác định các phần tử thứ nhất (1), selector2 xác định các phần tử thứ (2), nếu phần các phần tử thứ (2) nằm ngay sau phần tử thứ nhất (1), đồng thời (1) và (2) cùng cha thì các phần từ (2) được chọn.

Ví dụ:

/* chọn các phần tử span nằm ngay sau strong, cùng cha với strong */
strong + span {color: red;}

Áp dụng cho HTML sau, xem kết quả phía dưới. (span2 và 4 được chọn).

<div>
    <span>Span 1</span>
    <strong>Strong 1</strong>
    <span>Span 2</span>
    <em>Em</em>
    <span>Span 3</span>
    <strong>Strong 2</strong>
    <em>Em</em>
    <strong>Strong 3</strong>
    <span>Span 4</span>
</div>

Chọn dải phần tử cùng cha phía sau

Sử dụng dấu ~ để kết hợp 2 selector. Ví dụ selector1 ~ selector2, quy tắc đó là selector1 xác định các phần tử thứ nhất (1), selector2 xác định các phần tử thứ (2), nếu phần các phần tử thứ (2) nằm sau phần tử thứ nhất (1), đồng thời (1) và (2) cùng cha thì các phần từ (2) được chọn.

selector1 + selector2 chọn phần tử select2 liền ngay phía sau, còn selector1 ~ selector2 chọn tất cả các phần tử select2 phía sau.

Ví dụ:

/* chọn các span cùng cha với strong, nằm phía sau strong*/
strong ~ span {
    color: red;
}

<div>
    <span>Span 1</span>
    <strong>Strong 1</strong>
    <em>Em</em>
    <span>Span 2</span>
    <span>Span 3</span>
    <em>Em</em>
    <span>Span 4</span>
</div>

Chọn các phần tử con, cháu ... (hậu duệ)

Bạn có thể viết nhiều selector liên tiếp cách nhau bởi khoảng trắng (" ") để hình thành nên một selector mới.

selector1 selector2 {
    ...
}

Các phần tử được chọn bởi selector2 và các phần tử này phải nằm trong cấu trúc của phần tử xác định bởi selector1. Nói cách khác phần tử chọn bởi selector2 có tổ tiên là phần tử xác định bởi selector1 (phần tử cha trực tiếp, hoặc ngược lên cấp cao hơn trong cấu trúc DOM). Bạn có thể viết nhiều selector với cú pháp này.

selector1 selector2 selector3 {
}

Ví dụ:

/* Chọn tất cả các phần tử a, nó phải nằm trong cấu trúc của div */
div a { color: red;}

Code treenn a là nằm trong cấu trúc của div thì chọn, nghĩa là a có thể là con trực tiếp của div, hoặc là cấp sâu hơn (cháu, chắt ...). Như HTML sau, thì a nào sẽ được chọn theo selector kết hợp trên.

<body>
    <div>
        <a href="url">Được chọn do là con của div</a>
    </div>
    <div>
        <p>
            <a href="url">Được chọn do là cháu của div</a>
        </p>
        <blockquote>
            <p>
                <a href="url">được chọn do vẫn nằm trong div</a>
            </p>
        </blockquote>
    </div>
    
    <a href="url">Không được chọn</a>
    
    <p>
        <a href="url">Không được chọn</a>
    </p>
</body>

Ví dụ tiếp, kết hợp phức tạp hơn

.container div a .linkout [href^='https://abc.com'] { color: red;}

=> Chọn tất cả thẻ a, có class là linkout, thẻ a phải có thuộc tính href với tiền tố bằng https://abc.com, thẻ a phải trong cấu trúc thẻ div, thẻ div đó phải trong cấu trúc phần tử HTML có class là container.

Chú ý khi viết kết hợp như vậy khoảng trắng trước . và [ có thể bỏ.

.container div a.linkout[href^='https://abc.com'] { color: red;}

Tổng kết

Chú ý, còn có cách lựa chọn nữa, chọn trạng thái phần tử, chọn thành phần cấu tạo nên phần tử. Những cách lựa chọn này gọi là Pseudo được trình bày ở các phần sau.

Dưới đây là bảng tổng kết lại cách viết selector cơ bản

a { ... }
div, span { ... }

.success { ... }

#username { ... }

[checked]{ ... }

[type="submit"]{ ... }

p > strong { ... }
.success > p { ... }

.class1 div .class2 { ... }