Chúng ta không cần phải sử dụng tất cả các công cụ của CSS để có thể tạo ra được một website tốt. Tuy nhiên, nếu như chúng ta biết thêm nhiều công cụ hơn, thì điều đó cũng có nghĩa là chúng ta sẽ có thêm nhiều lựa chọn hơn để thực hiện ý tưởng của mình. Hãy cùng thảo luận thêm về các bộ chọn trong CSS.
Kết hợp các bộ chọn trong CSS
Nếu như bạn đang thắc mắc là tại sao mình đã không đề cập đến việc kết hợp các bộ chọn từ những
bài viết đầu tiên, thì... mình phải nói rằng đây là lỗi của mình. Chỉ đơn giản là mình quên mà thôi. 
Trong mọi khía cạnh của cuộc sống, cách tự nhiên nhất mà chúng ta học bất kỳ thứ gì, chắc chắn không phải là một lộ trình thẳng tắp. Chặng đường mà chúng ta phải đi qua luôn luôn là các đường xoáy đệ quy liền mạch và tiếp diễn không ngừng.
Một đường xoáy đệ quy
Chúng ta khởi đầu bằng việc học một vài thứ cơ bản và rồi bắt đầu tạo ra thứ gì đó. Sau đó chúng ta lại quay trở lại với những kiến thức trọng tâm để học nhiều thêm một chút nữa, và tạo ra những thứ mới tốt đẹp hơn một chút. Là như vậy đấy.
Và bây giờ thì chúng ta đang bắt đầu một chu kỳ mới bằng việc học thêm về các bộ chọn CSS.
Lợi ích của việc kết hợp các bộ chọn CSS là gì?
Hãy cùng nhìn lại ví dụ về thanh điều hướng đơn giản của chúng ta.
topnav.html
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>A simple navigation bar</title> <link rel="stylesheet" href="topnav.css"> </head> <body> <nav id="topnav"> <a id="logo" class="nav-link" href="#">MY NAME</a> <a class="nav-link" href="#">Link 1</a> <a class="nav-link" href="#">Link 2</a> <a class="nav-link" href="#">Link 3</a> <a class="nav-link" href="#">Link 4</a> <a class="nav-link" href="#">Link 5</a> <a id="about" class="nav-link" href="#">About Me</a> </nav> </body>
</html>
Để trang trí các liên kết, chúng ta đã đặt cho chúng một tên class có tính mô tả khá tốt nav-link.
Nhưng nếu như bây giờ chúng ta có thêm một thanh điều hướng khác trong trang web thì sao?
Bằng việc sử dụng trực tiếp tên class nav-link trong code CSS, chúng ta đã khiến tên class
này không thể được sử dụng lại vào mục đích khác hay cho các thành phần khác trong trang web.
Thật may mắn, CSS cho phép chúng ta kết hợp các bộ chọn để chọn ra các phần tử chính xác hơn và giúp cho các tên class có thể được tái sử dụng cho nhiều thành phần khác nhau của trang web. Đoạn code dưới đây là một ví dụ về việc kết hợp các bộ chọn trong CSS. Trong ví dụ, có 2 khối code CSS:
- Khối đầu tiên sẽ chỉ chọn những
.nav-linkđược đặt bên trong#topnav. - Khối thứ hai sẽ chỉ chọn những
.nav-linkđược đặt bên trong#sidenav.
combine.css
#topnav .nav-link { /* styling .nav-link nested inside #topnav */
} #sidenav .nav-link { /* styling .nav-link nested inside #sidenav */
}
Làm thế nào để kết hợp các bộ chọn?
Việc kết hợp các bộ chọn CSS có thể được chia thành 3 kiểu và chúng ta sẽ nói về từng kiểu một:
- Union & Intersection (Tổng Hợp & Phần Giao)
- Next Sibling & Followed Siblings (Phần Tử Kế Cận & Các Phần Tử Theo Sau)
- Children & Decendants (Các Phần Tử Con & Các Phần Tử Kế Thừa)
1. Union & Intersection
Union của nhiều bộ chọn thường được sử dụng để giảm việc viết lặp code CSS.
Hãy giả định rằng chúng ta muốn áp dụng cùng font chữ cho tất cả các tiêu đề trong trang web của chúng ta. Như vậy, đây sẽ là cách mà chúng ta viết CSS khi không kết hợp các bộ chọn.
union.css
1 { font-family: 'Arial', sans-serif; }
h2 { font-family: 'Arial', sans-serif; }
h3 { font-family: 'Arial', sans-serif; }
h4 { font-family: 'Arial', sans-serif; }
h5 { font-family: 'Arial', sans-serif; }
h6 { font-family: 'Arial', sans-serif; }
Đoạn mã được viết lại sau đây có thể đem lại kết quả hiển thị tương tự.
union.css
h1, h2, h3, h4, h5, h6 { font-family: 'Arial', sans-serif;
}
Bằng cách viết tên các bộ chọn liền nhau phân tách bởi các dấu phẩy ,
chúng ta có thể viết các luật CSS được sử dụng chung và giảm được việc lặp code CSS.
Và đó là Union, giờ hãy cùng nói về Intersection (phần giao).
Intersection giúp chúng ta chọn lấy các phần tử chính xác hơn bằng cách
viết liền tên một bộ chọn đứng ngay trước bộ chọn khác. Ví dụ dưới đây sẽ chỉ chọn
các phần tử <p> là thành viên của .exceprt và ngược lại.
intersection.css
p.excerpt { color: Gray;
}
intersection.html
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>Intersection</title> <link rel="stylesheet" href="intersection.css"> </head> <body> <p>This element is not selected.</p> <p class="excerpt">This text is Gray</p> <div class="excerpt">This element is not selected</div> </body>
</html>
2. Next Sibling & Followed Siblings
Để chọn next sibling, phần tử kế cận tiếp theo, chúng ta có thể sử dụng một dấu cộng + để kết hợp các bộ chọn.
Ví dụ dưới đây sẽ chỉ chọn duy nhất phần tử <p> đứng ngay sau #unique.
next.css
#unique + p { color: Gray;
}
next.html
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>The Next Door</title> <link rel="stylesheet" href="next.css"> </head> <body> <h2>A heading</h2> <p>This element is not selected.</p> <h2 id="unique">Who is next to me?</h2> <p>Me, my color is Gray</p> <h2>A heading</h2> <p>This element is not selected.</p> </body>
</html>
Nếu như chúng ta thay đổi #unique thành h2 trong code CSS, tất cả 3 phần tử <p> đều sẽ được chọn.
Trình duyệt web sẽ hiểu rằng chúng ta muốn chọn các phần tử <p> đứng ngay sau một phần tử <h2>.
Để chọn tất cả các followed siblings, các phần tử theo sau, chúng ta có thể sử dụng 1 dấu tidle ~ để
kết hợp các bộ chọn. Hãy cùng thay đổi code của chúng ta một chút.
followed.css
#unique ~ p { color: Gray;
}
followed.html
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>Followed by the Joy</title> <link rel="stylesheet" href="followed.css"> </head> <body> <h2>A heading</h2> <p>This element is not selected.</p> <h2 id="unique">Who is following me?</h2> <p>Me, my color is Gray.</p> <h2>A heading</h2> <p>Count me in, my color is Gray, too.</p> </body>
</html>
3. Children & Decendants
Để chọn các children, các phần tử con, chúng ta có thể sử dụng một dấu lớn > để kết hợp các bộ chọn.
Ví dụ dưới đây sẽ chỉ chọn các liên kết là các phần tử con của #topnav, nhưng không chọn hết tất cả các
phần tử xếp chồng.
children.css
#topnav > a { color: Gray;
}
children.html
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>Children</title> <link rel="stylesheet" href="children.css"> </head> <body> <nav id="topnav"> <!-- children --> <a href="#">Gray</a> <a href="#">Gray</a> <div><!-- other descendants --> <a href="#">Not selected</a> <a href="#">Not selected</a> <a href="#">Not selected</a> </div> </nav> </body>
</html>
Để chọn tất cả các decendants, các phần tử xếp chồng của #topnav, chúng ta chỉ cần bỏ dấu lớn > đã sử dụng.
decendants.css
#topnav a { color: Gray;
}
decendants.html
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>Descendants</title> <link rel="stylesheet" href="descendants.css"> </head> <body> <nav id="topnav"> <!-- children --> <a href="#">Gray</a> <a href="#">Gray</a> <div><!-- other descendants --> <a href="#">Gray</a> <a href="#">Gray</a> <a href="#">Gray</a> </div> </nav> </body>
</html>
Trong tất cả các ví dụ từ đầu bài viết này, mình đã sử dụng các bộ chọn id để giải thích cách hoạt động của code dễ hơn.
Tuy nhiên, bộ chọn được sử dụng ở phía trước hoàn toàn có thể là các bộ chọn class hoặc các bộ chọn thông thường.
Bài viết về kết hợp các bộ chọn trong CSS của chúng ta tới đây là kết thúc. Trong bài viết tiếp theo, chúng ta sẽ cùng nói về các class giả định. Các bộ chọn này sẽ giúp chúng ta tạo ra các hiệu ứng tương tác với người dùng trang web. Ví dụ như khi người dùng rê trỏ chuột tới 1 liên kết và màu của liên kết đó sẽ được thay đổi.