Selector trong CSS rất linh hoạt, hầu như bạn có thể chọn bất cứ cái gì từ thẻ <body> đi sâu vào các thẻ bên trong nó. Ở bài này mình sẽ nói qua các kiểu sử dụng vùng chọn cơ bản nhất vì bạn sẽ sử dụng nó thường xuyên nhất, ngoài ra còn có các kiểu sử dụng vùng chọn nâng cao khác mình sẽ đưa ra ở topic khác.
Vùng chọn là gì?
Trong CSS, vùng chọn nghĩa là khu vực mà bạn muốn nó sẽ được áp dụng các quy tắc CSS mà bạn muốn chỉ định cho nó. Ví dụ bạn muốn tăng kích thước font chữ của các thẻ h1 thì vùng chọn của bạn sẽ là h1.
Trước khi đi tìm hiểu khái niệm selector là gì thì mình muốn nhắc lại kiến thức về HTML và CSS một chút xíu. Như bạn biết các thẻ HTML thường sẽ có thẻ mở <tag> và thẻ đóng </tag> và bên trong thẻ đó có thể có nhiều thẻ khác nữa. Vậy ta sẽ gọi thẻ tag đó là thẻ cha và các thẻ nằm bên trong nó là thẻ con.
Các dạng Selectors.
Selector phân cấp
Ví dụ: thiết lập color màu đỏ cho các thẻ p nằm trong thẻ div
<div>
<p>
Nội dung sẽ có màu đỏ vì nó nằm trong thẻ p.
</p>
</div>
<p>
Nội dung không có màu vì nó nằm ngoài thẻ p.
</p>
div p{
color: red
}
Như vậy để phân cấp thì ta sẽ dùng khoảng trắng (space) để ngăn cách giữa các thẻ, thẻ nào nằm đầu tiên là thẻ cha, tiếp theo là thẻ con.
Tới đây bạn sẽ có câu hỏi là nếu có 3 cấp thì làm thế nào? Bạn chỉ cần thêm bình thường như hai cấp:
Ví dụ: Thiết lập color màu đỏ cho thẻ strong nằm trong thẻ p và thẻ p nằm trong thẻ div.
<div>
<p>
<strong>Nội dung sẽ có màu đỏ vì nó nằm trong thẻ p.</strong>
<span>Nội dung không có màu vì nó nằm ngoài thẻ p.</span>
</p>
</div>
div p strong{
color: red
}Selector ID
Bạn lưu ý là trong một trang web ID là duy nhất nhé, nghĩa là nếu bạn định nghĩa hai ID giống nhau trong 1 layout thì không đúng chuẩn giao diện của W3C.Giả sử bạn có nhiều thẻ div và bạn muốn viết CSS cho một thẻ DIV nào đó thôi thì bạn có thể chọn giải pháp là Selector theo ID của HTML. Chúng ta sử dụng dấu thăng (#) để đại diện cho ID.
Ví dụ: Cho background màu đỏ cho div có id="active".
<div id="active">
ACTIVE
</div>
<div>
NON-ACTIVE
</div>
#active{
background: red
}
div#active{
background: red
}Selector class
Với ID là duy nhất thì class ngược lại, nghĩa là bạn có thể cho nhiều thẻ HTML có cùng tên class, điều này khá tiện lợi cho CSS. Ví dụ bạn cần style cho một số thẻ div nào đó thôi thì nếu bạn dùng ID thì không hay lắm vì phải viết nhiều lần, chính vì vậy ta sẽ chọn class. Selector cho class sẽ là dấu chấm (.).Ví dụ: thiết lập background màu vàng cho các the div có class="bg-yellow"
<div>
NONE
</div>
<div class="bg-yellow">
Yellow
</div>
<div class="bg-yellow">
Yellow
</div>
.bg-yellow{
background: yellow
}div.bg-yellow{
background: yellow
}Một vài lưu ý về CSS Selector
Thứ nhất bạn phải phân biệt được hai loại là ID selector và CSS selector:• Với ID thì trong mỗi trang web nó là duy nhất nên thông thường chúng ta hay dùng nó ở những vị trí không có tính chất lặp đi lặp lại nhiều lần
• Với Class thì ta có thể đặt nhiều vị trí, chính vì vậy nếu website bạn có nhiều block giống nhau thì hãy chọn class
Thứ hai ban phải hiểu dù ID hay class thì đều tuân theo quy luật phâp cấp, nghĩa là khi truy vấn selector thì sẽ ghi cấp cha rồi tới cấp con. Ví dụ giờ viết CSS cho thẻ h2 có class="title" nằm trong thẻ div có id="main".
div#mian h2.title{
}