[CSS 01] Vùng chọn (Selector) trong CSS

Bài đầu tiên trong Học CSS căn bản chúng ta sẽ tìm hiểu về các vùng chọn (selector) cơ bản trong CSS. Vùng chọn vô cùng quan trọng để các khai báo CSS có thể áp dụng đúng ý đồ của người lập trình.

Vùng chọn trong CSS là gì?

Hiểu một cách đơn giản vùng chọn (selector) là khu vực bạn muốn áp đặt quy tắc CSS lên nó. Ví dụ như nếu bạn muốn để tất cả các tiêu đề h3 đều có màu vàng như website này thì vùng chọn sẽ là h3. Vùng chọn có thể là tên thẻ HTML hoặc thuộc tính của HTML

Các loại vùng chọn cơ bản

Vùng chọn tag

Cấu trúc CSS của vùng chọn tag: tên_tag {CSS} Đây là vùng chọn lớn áp dụng lên tất cả các phần tử được gắn thẻ. Như ví dụ ở dưới sử dụng đoạn CSS: h1 {color: red;} Để đổi tất cả các tiêu đề có tag H1 thành màu đỏ Một số vùng chọn tag trong website: h1, h2, p, span, div…

Vùng chọn Class

Cấu trúc CSS vùng chọn là class: .tên_class {CSS} Như ví dụ dưới tôi đã dùng cấu trúc: .class-title {color: green;} để đổi thẻ h1 thứ 2 sang màu xanh lá cây Một class có thể được sử dụng cho nhiều phần tử trên một trang tài liệu HTML Class cũng có thể được viết kèm theo tên thẻ kiểu h1.class-title {CSS}

See the Pen Selector CSS by Nguyen The Cuong (@nguyen-the-cuong) on CodePen.

Vùng chọn dựa vào ID

Cấu trúc CSS vùng chọn là ID: #tên_ID {CSS} Giống như Class, ID cũng có thể được viết kèm theo tên thẻ kiểu h1#id-title {CSS} Như ví dụ ở trên. Thẻ h1 thứ 3 đã dược đổi thành màu xanh lục nhờ vùng chọn là ID Mặc dù mỗi phần tử phải mang một id riêng biệt không trùng nhau nhưng nó có thể chứa nhiều ID. Các ID được khai báo cách nhau một “dấu cách” Ví dụ: id="id-title special tieu-de"

Vùng chọn nhiều cấp

Đối với nhiều trường hợp bạn chỉ muốn lấy một phần tử nằm trong một phần tử khác. Như trường hợp ở dưới đây Khi mình muốn đổi màu đỏ chỉ các thẻ <li> trong phần được gán ID Author sẽ sử dụng cấu trúc: #author li {color: red;}.  Lúc này ta thấy chỉ phần Author được đổi thành màu đỏ. Còn những thẻ <li> khác không bị đổi màu Khi mình muốn đổi màu xanh các thẻ <li> nằm trong phần content nhưng dưới 1 cấp <ul> thì sử dụng cấu trúc #menu ul > li { color: green;}

See the Pen Selector da cap by Nguyen The Cuong (@nguyen-the-cuong) on CodePen.

Vùng chọn hết sức quan trọng trước khi bắt đầu vào CSS cơ bản vì sau này các bạn sẽ đối mặt với nó liên tục. Hiểu rõ vùng chọn là bước đầu tiên cực kì thuận lợi để các bạn tiến sâu hơn các kiến thức CSS bao la