CSS Selector là gì? Tìm hiểu những CSS Selector cần thiết và cách sử dụng chúng
CSS Selector là gì? Tìm hiểu những CSS Selector cần thiết và cách sử dụng chúng
CSS Selector là một trong những khái niệm cơ bản và quan trọng nhất khi làm việc với CSS. Trong bài viết này, chúng ta sẽ tìm hiểu về CSS Selector, các loại selector phổ biến và cách sử dụng chúng hiệu quả.
CSS Selector là gì?
CSS Selector là cách để chọn và định dạng các phần tử HTML cụ thể trên trang web của bạn. Nó giống như một "địa chỉ" giúp CSS biết được bạn muốn áp dụng style cho phần tử nào.
Bảng tổng hợp các loại CSS Selector
| Loại Selector | Cú pháp | Ví dụ | Mô tả |
|---|---|---|---|
| Element | element |
p { } |
Chọn tất cả các phần tử theo tên thẻ |
| Class | .class |
.highlight { } |
Chọn các phần tử có class cụ thể |
| ID | #id |
#header { } |
Chọn phần tử có ID cụ thể |
| Attribute | [attribute] |
input[type="text"] { } |
Chọn phần tử có thuộc tính cụ thể |
| Descendant | ancestor descendant |
div p { } |
Chọn phần tử con bên trong phần tử cha |
| Child | parent > child |
ul > li { } |
Chọn phần tử con trực tiếp |
| Adjacent Sibling | element + element |
h2 + p { } |
Chọn phần tử ngay sau phần tử khác |
| General Sibling | element ~ element |
h2 ~ p { } |
Chọn tất cả phần tử anh em sau |
| Pseudo-class | :pseudo-class |
a:hover { } |
Chọn trạng thái đặc biệt của phần tử |
| Pseudo-element | ::pseudo-element |
p::first-line { } |
Chọn một phần cụ thể của phần tử |
| Universal | * |
* { } |
Chọn tất cả các phần tử |
| Multiple | element, element |
h1, h2, h3 { } |
Chọn nhiều phần tử cùng lúc |
| Not | :not(selector) |
:not(.highlight) { } |
Chọn phần tử không khớp với selector |
| First/Last Child | :first-child |
li:first-child { } |
Chọn phần tử con đầu tiên/cuối cùng |
| Nth Child | :nth-child(n) |
li:nth-child(odd) { } |
Chọn phần tử con theo thứ tự |
Độ ưu tiên (Specificity) của các Selector
| Loại Selector | Điểm Specificity |
|---|---|
| Inline styles | 1000 |
| ID | 100 |
| Class, Attribute, Pseudo-class | 10 |
| Element, Pseudo-element | 1 |
Các loại CSS Selector cơ bản
1. Element Selector (Bộ chọn phần tử)
Đây là cách đơn giản nhất để chọn các phần tử HTML.
<!-- HTML -->
<p>Đây là đoạn văn bản thông thường.</p>
<p>Đây là một đoạn văn bản khác.</p>
<h1>Tiêu đề chính</h1>
/* Chọn tất cả các thẻ p */
p {
color: blue;
}
/* Chọn tất cả các thẻ h1 */
h1 {
font-size: 24px;
}
2. Class Selector (Bộ chọn class)
Sử dụng dấu chấm (.) để chọn các phần tử có class cụ thể.
<!-- HTML -->
<p class="highlight">Đoạn văn bản được highlight.</p>
<p>Đoạn văn bản thông thường.</p>
<p class="highlight">Đoạn văn bản được highlight khác.</p>
<button class="button primary large">Nút chính</button>
<button class="button secondary">Nút phụ</button>
/* Chọn tất cả các phần tử có class="highlight" */
.highlight {
background-color: yellow;
}
/* Có thể kết hợp với element */
p.highlight {
font-weight: bold;
}
/* Chọn phần tử có nhiều class */
.button.primary.large {
padding: 15px 30px;
}
3. ID Selector (Bộ chọn ID)
Sử dụng dấu # để chọn phần tử có ID cụ thể.
<!-- HTML -->
<header id="header">
<h1>Logo</h1>
<nav>Menu</nav>
</header>
<div id="main-content">
<h2>Nội dung chính</h2>
<p>Đây là nội dung của trang web.</p>
</div>
/* Chọn phần tử có id="header" */
#header {
background-color: #333;
color: white;
}
/* Kết hợp với element */
div#main-content {
max-width: 1200px;
}
4. Attribute Selector (Bộ chọn thuộc tính)
Chọn các phần tử dựa trên thuộc tính của chúng.
<!-- HTML -->
<input type="text" placeholder="Nhập tên">
<input type="email" placeholder="Nhập email">
<input type="submit" value="Gửi">
<a href="https://example.com">Liên kết bảo mật</a>
<a href="http://example.org">Liên kết thông thường</a>
<a href="document.pdf">Tải PDF</a>
<a href="https://example.com/page">Trang web</a>
/* Chọn tất cả các input có type="text" */
input[type="text"] {
border: 1px solid #ccc;
}
/* Chọn các thẻ a có href bắt đầu bằng "https" */
a[href^="https"] {
color: green;
}
/* Chọn các thẻ a có href kết thúc bằng ".pdf" */
a[href$=".pdf"] {
background: url('pdf-icon.png') no-repeat;
}
/* Chọn các thẻ a có href chứa "example.com" */
a[href*="example.com"] {
color: purple;
}
/* Chọn các input có type chứa "text" hoặc "email" */
input[type*="text"],
input[type*="email"] {
padding: 8px;
}
5. Descendant Selector (Bộ chọn hậu duệ)
Chọn các phần tử con bên trong một phần tử cha.
<!-- HTML -->
<div class="container">
<p>Đoạn văn bản trong container.</p>
<div class="box">
<p>Đoạn văn bản trong box.</p>
</div>
</div>
<nav>
<a href="#">Trang chủ</a>
<a href="#">Giới thiệu</a>
<a href="#">Liên hệ</a>
</nav>
/* Chọn tất cả các p nằm trong div */
div p {
margin: 10px;
}
/* Chọn tất cả các a nằm trong nav */
nav a {
text-decoration: none;
}
6. Child Selector (Bộ chọn con trực tiếp)
Chọn các phần tử con trực tiếp của một phần tử cha.
<!-- HTML -->
<ul class="menu">
<li>Mục 1</li>
<li>Mục 2
<ul>
<li>Mục con 2.1</li>
<li>Mục con 2.2</li>
</ul>
</li>
<li>Mục 3</li>
</ul>
<div class="container">
<div>Phần tử con trực tiếp 1</div>
<div>Phần tử con trực tiếp 2</div>
<section>
<div>Phần tử con gián tiếp</div>
</section>
</div>
/* Chọn các li là con trực tiếp của ul */
ul > li {
list-style-type: none;
}
/* Chọn các div là con trực tiếp của .container */
.container > div {
margin-bottom: 20px;
}
7. Adjacent Sibling Selector (Bộ chọn anh em kế tiếp)
Chọn phần tử ngay sau một phần tử khác.
<!-- HTML -->
<h2>Tiêu đề</h2>
<p>Đoạn văn bản ngay sau h2.</p>
<p>Đoạn văn bản thứ hai.</p>
<div class="form-group">
<input type="text" placeholder="Tìm kiếm">
<button>Tìm</button>
<button>Xóa</button>
</div>
/* Chọn p ngay sau h2 */
h2 + p {
font-style: italic;
}
/* Chọn button ngay sau input */
input + button {
margin-left: 10px;
}
8. General Sibling Selector (Bộ chọn anh em chung)
Chọn tất cả các phần tử anh em sau một phần tử.
<!-- HTML -->
<h2>Tiêu đề</h2>
<p>Đoạn văn bản 1 sau h2.</p>
<p>Đoạn văn bản 2 sau h2.</p>
<p>Đoạn văn bản 3 sau h2.</p>
<div class="header">Header</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
/* Chọn tất cả các p sau h2 */
h2 ~ p {
color: gray;
}
/* Chọn tất cả các .item sau .header */
.header ~ .item {
border-top: 1px solid #eee;
}
9. Pseudo-classes (Lớp giả)
Pseudo-classes cho phép bạn chọn các phần tử dựa trên trạng thái hoặc vị trí của chúng.
<!-- HTML -->
<a href="#">Liên kết</a>
<input type="text" placeholder="Nhập text">
<ul>
<li>Mục 1</li>
<li>Mục 2</li>
<li>Mục 3</li>
<li>Mục 4</li>
</ul>
<table>
<tr>
<td>Dòng 1</td>
</tr>
<tr>
<td>Dòng 2</td>
</tr>
<tr>
<td>Dòng 3</td>
</tr>
</table>
/* Chọn liên kết khi hover */
a:hover {
color: red;
}
/* Chọn input khi focus */
input:focus {
border-color: blue;
}
/* Chọn phần tử con đầu tiên */
li:first-child {
font-weight: bold;
}
/* Chọn phần tử con cuối cùng */
li:last-child {
border-bottom: none;
}
/* Chọn các phần tử con chẵn */
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Chọn các phần tử con lẻ */
tr:nth-child(odd) {
background-color: #fff;
}
/* Chọn phần tử con thứ n */
li:nth-child(3) {
color: blue;
}
10. Pseudo-elements (Phần tử giả)
Pseudo-elements cho phép bạn tạo style cho một phần cụ thể của phần tử.
<!-- HTML -->
<p>Đây là một đoạn văn bản dài. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h2>Tiêu đề với ký hiệu</h2>
<a href="#">Liên kết với mũi tên</a>
<div class="selectable">
Đoạn văn bản có thể chọn
</div>
/* Tạo style cho dòng đầu tiên của đoạn văn */
p::first-line {
font-variant: small-caps;
}
/* Tạo style cho chữ cái đầu tiên */
p::first-letter {
font-size: 2em;
float: left;
}
/* Thêm nội dung trước phần tử */
h2::before {
content: "§ ";
color: #999;
}
/* Thêm nội dung sau phần tử */
a::after {
content: " →";
}
/* Tạo style cho phần được chọn */
::selection {
background-color: yellow;
color: black;
}
11. Universal Selector (Bộ chọn phổ quát)
Chọn tất cả các phần tử.
<!-- HTML -->
<div class="container">
<h1>Tiêu đề</h1>
<p>Đoạn văn bản</p>
<ul>
<li>Mục 1</li>
<li>Mục 2</li>
</ul>
</div>
/* Reset CSS cơ bản */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Chọn tất cả các phần tử trong .container */
.container * {
margin-bottom: 10px;
}
12. Multiple Selectors (Bộ chọn nhiều phần tử)
Chọn nhiều phần tử cùng một lúc.
<!-- HTML -->
<h1>Tiêu đề 1</h1>
<h2>Tiêu đề 2</h2>
<h3>Tiêu đề 3</h3>
<button class="primary-button">Nút chính</button>
<button class="secondary-button">Nút phụ</button>
<button class="danger-button">Nút xóa</button>
/* Chọn tất cả các heading */
h1, h2, h3, h4, h5, h6 {
font-family: Arial, sans-serif;
}
/* Chọn các phần tử có class tương tự */
.primary-button,
.secondary-button,
.danger-button {
padding: 10px 20px;
border-radius: 4px;
}
13. Not Selector (Bộ chọn phủ định)
Chọn các phần tử không khớp với selector được chỉ định.
<!-- HTML -->
<input type="text" placeholder="Tên">
<input type="email" placeholder="Email">
<input type="submit" value="Gửi">
<p class="note">Đây là ghi chú.</p>
<p>Đây là đoạn văn bản thông thường.</p>
<p>Đây là đoạn văn bản khác.</p>
/* Chọn tất cả các input không phải type="submit" */
input:not([type="submit"]) {
border: 1px solid #ccc;
}
/* Chọn tất cả các p không có class="note" */
p:not(.note) {
color: #333;
}
Best Practices khi sử dụng CSS Selector
- Ưu tiên sử dụng class selector thay vì ID selector để tăng tính tái sử dụng.
- Tránh sử dụng !important vì nó có thể gây khó khăn trong việc maintain code.
- Giữ độ phức tạp của selector ở mức tối thiểu để dễ dàng maintain.
- Sử dụng BEM (Block Element Modifier) để tổ chức CSS classes một cách có cấu trúc.
- Tránh selector quá dài vì có thể ảnh hưởng đến performance.
- Sử dụng các pseudo-class và pseudo-element một cách hợp lý để tăng tính tương tác.
- Tận dụng CSS specificity để tránh conflicts trong styles.