10 
Mục lục
Học HTML, CSS từ Zero Tới Hero
- CSS selectors là gì?
- Cách tra cứu CSS selctors
Tra cứu các CSS selectors: W3Schools CSS Selectors.
CSS selectors là gì?
CSS selectors là bộ cú pháp giúp chọn ra những thẻ HTML cụ thể mà bạn muốn tác động CSS lên chúng.
Ví dụ:
<style>
/* Chọn các thẻ p */
p {
color: green;
}
/* Chọn các thẻ div */
div {
width: 120px;
height: 120px;
margin: 40px;
background-color: blueviolet;
}
</style>
<p>Hôm nay là một ngày đẹp trời</p>
<div class="box1"></div>
/* Chọn các thẻ p */ p.bcd { color: green; } /* Chọn các thẻ div */ div.abc { width: 120px; height: 120px; margin: 40px; background-color: blueviolet; }
Hôm nay là một ngày đẹp trời
Ở ví dụ bên trên, div và p chính là CSS selector, giúp chọn ra được thẻ <div>, thẻ <p> và tác động CSS lên chúng.
Cách tra cứu CSS selctors
Để tra cứu thêm, hãy tìm kiếm Google với từ khóa “CSS selectors”, sau đó tham khảo ở các nguồn tiêu biểu như:
Trong bài học này chỉ tìm hiểu tổng quan về CSS selectors. Cụ thể về từng CSS selector sẽ được học chi tiết trong các bài học tiếp theo.
Simple selectors #1 (name, id, class)
| Selector | Ví dụ | Giải thích |
|---|---|---|
element | p | Chọn tất cả thẻ <p> |
#id | #header | Chọn thẻ có id="header" |
.class | .title | Chọn tất cả các thẻ có class="title" |
Simple selectors #2
| Selector | Ví dụ | Giải thích |
|---|---|---|
* | * | Chọn tất cả thẻ |
element.class | p.intro | Chọn tất cả thẻ <p> có class intro |
element, element | div, p | Chọn tất cả thẻ <div> và tất cả thẻ <p> |
.class1.class2 | .name1.name2 | Chọn tất cả các thẻ có cả class name1 và name2 |
Combinator selectors
| Selector | Ví dụ | Giải thích |
|---|---|---|
element element | div p | Chọn tất cả thẻ <p> nằm trong thẻ <div> |
element > element | div > p | Chọn tất cả thẻ <p> là con trực tiếp của thẻ <div> |
element + element | div + p | Chọn một thẻ <p> đầu tiên đứng ngay sau thẻ <div> |
element1 ~ element2 | div ~ p | Chọn tất cả thẻ <p> đứng sau thẻ <div> |
Tóm tắt
- CSS selectors là bộ cú pháp giúp chọn lựa ra những thẻ HTML cụ thể mà bạn muốn CSS tác động lên nó.
- Tra cứu các CSS selectors: W3Schools CSS Selectors.
