CSS Selectors
Một selector được sử dụng để tìm (hoặc chọn) những phần tử HTML mà bạn muốn style.
Chúng ta có thể chia CSS selector thành 5 loại:
-
Những selector đơn giản: chọn những phần tử dựa trên tên(name), id hoặc lớp(class)
-
Những selector kết hợp:chọn những phần tử dựa trên mối quan hệ giữa chúng
-
Những selector lớp giả (pseudo-class ): chọn những phần tử dựa trên trạng thái nào đó
-
Những selector phần tử giả (pseudo-elements): chọn những phần tử là một phần của phần tử khác
-
Những selector thuộc tính (chọn những phần tử dựa trên thuộc tính của chúng)
Bài học này sẽ giải thích về các selector cơ bản trong CSS.
Selector phần tử trong CSS
Selector phần tử sẽ chọn ra những phần tử HTML dựa trên tên của chúng.
Ví dụ
Ở đây, tất cả những thẻ <p> trên trang sẽ được căn giữa với màu chữ đỏ:
p { text-align: center; color: red; }Selector id trong CSS
Selector id sử dụng thuộc tính id của thẻ HTML để trỏ đến phần tử được chỉ định.
Không tồn tại hai thẻ có cùng một id trong trang, vì vậy id được dùng để chọn duy nhất một thẻ!
Để chọn thẻ bằng id, ta dùng dấu # theo sau là id của thẻ.
Ví dụ
Dưới đây là cách để chọn một thẻ có id="para1":
#para1 { text-align: center; color: red; }
Chú ý: tên của id không bắt đầu bằng một chữ số!
Selector class trong CSS
Selector class chọn thẻ HTML bằng thuộc tính class của thẻ.
Để chọn thẻ với class chỉ định, ta viết dấu (.) theo sau là tên class.
Ví dụ
Trong ví dụ này, tất cả các thẻ có class là center sẽ được căn giữa với màu chữ đỏ:
.center { text-align: center; color: red; }
Bạn có thể chọn những thẻ HTML có class chỉ định.
Ví dụ
Trong ví dụ này, chỉ những thẻ <p> có class center mới được căn giữa và có chữ đỏ:
p.center { text-align: center; color: red; }
Một thẻ HTML có thể có nhiều class.
Ví dụ
Trong ví dụ này, thẻ <p> sẽ có hai class là center và large:
<p class="center large">This paragraph refers to two classes.</p>
Chú ý:Tên của class không bắt đầu bằng chữ số!
Selector toàn bộ trong CSS
Selector toàn bộ (*) sẽ chọn tất cả các thẻ HTML trong trang.
Ví dụ
Câu lệnh CSS dưới đây ảnh hưởng toàn bộ phần tử có trong trang:
* { text-align: center; color: blue; }Selector gom nhóm trong CSS
Selector gom nhóm sẽ chọn những phần tử có cùng style.
Nhìn đoạn code CSS bên dưới, thẻ <h1>, <h2> và <p> có cùng style:
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 ta gom nhóm những selector này lại, giúp giảm thiểu những dòng code.
Để gom nhóm nhiều selector, ta viết chúng cách nhau bởi dấu phẩy.
Ví dụ
Ở ví dụ này, ta sẽ gom nhóm những selector từ đoạn code ở trên:
h1, h2, p { text-align: center; color: red; }All CSS Simple Selectors
| Selector | Example | Example description |
| #id | #firstname | Chọn thẻ có id là firstname |
| .class | .intro | Chọn những thẻ có class là intro |
| element.class | p.intro | Chọn những thẻ <p> có class là intro |
| * | * | Chọn tất cả các thẻ có trong trang |
| element | p | Chọn tất cả thẻ <p> có trong trang |
| element, element,... | div, p | Chọn tất cả thẻ <div> và tất cả thẻ <p> |