HTML/CSS | CSS selectors là gì?

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>

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ư:

• W3schools
• Developer.mozilla

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.