Kinh nghiệm code web: sử dụng class con trong class khác

Công việc thiết kế website đòi hỏi bạn phải biết chút kiến thức cơ bản về Css, Html… Và một điều khá hữu dụng cho các bạn thường xuyên “làm đẹp” website bằng css đó là cách hiển thị duy nhất 1 class con trong một mục nào đó mà không muốn áp dụng nó cho toàn bộ website.

Bạn muốn áp dụng kiểu CSS cho một lớp (class) trong một lớp khác? Trong hướng dẫn này, tôi sẽ chỉ cho bạn mọi thứ bạn cần biết để sử dụng các lớp CSS.

Trong công việc thiết kế website, để lồng các lớp hoặc bất kỳ bộ chọn nào khác trong CSS, chỉ cần tách phân cấp bộ chọn bằng dấu cách. Thí dụ:.parent .child { /* CSS Properties */ }

Giả sử bạn có mã sau và chỉ muốn áp dụng kiểu cho mã <h1 class="post-title">đó nằm trong <article class="blog-post">.

<article class="blog-post">
	<h1 class="post-title">Blog title</h1>
	<p>Article content</p>
</article>

Tệp CSS của bạn sẽ như thế này:

.blog-post .post-title {
	/* CSS Properties */
	color: grey;
}

Tất cả h1 có lớp “post-title” nằm trong lớp “blog-post” đều nhận được thuộc tính CSS. Ngay cả khi chúng được lồng vào bên trong các thẻ khác. Trong khi mọi thứ bên ngoài “blog-post”, quy tắc sẽ không áp dụng.

Đối với mục đích trình diễn, nếu chúng ta muốn áp dụng cùng một hiệu ứng cho tất cả h1, không phụ thuộc vào lớp:

.blog-post h1 {
	/* CSS Properties */
	color: grey;
}

Bạn có thể sử dụng bất kỳ bộ chọn CSS nào trong khi lồng với khoảng trắng, bạn có thể sử dụng bộ chọn id với # id-name, các bộ chọn thẻ như h1, h2 v.v.

Chỉ chọn class con trực tiếp

Nếu bạn có mã bên dưới và chỉ muốn áp dụng màu xám trên các liên kết là con trực tiếp của chân trang và không phải liên kết trong bản quyền div:

<footer>
	<a href="index">Home</a>
	<a href="blog">Blog</a>

	<div class="copyright">
		<a href="#">website.com</a>
	</div>
</footer>

footer > a {
	color: grey;
}

Chỉ chọn class con đầu tiên

Hãy lấy cùng một ví dụ ở trên, nhưng bây giờ sự khác biệt là bạn chỉ muốn áp dụng cấu trúc phân cấp cho liên kết đầu tiên.

<footer>
	<a href="index">Home</a>
	<a href="blog">Blog</a>

	<div class="copyright">
		<a href="#">website.com</a>
	</div>
</footer>

Đoạn mã dưới đây sẽ áp dụng màu xám cho cả phần tử con đầu tiên của footer và phần tử con đầu tiên của .copyright.

footer a:first-child {
	color: grey;
}

footer > a:first-child {
	color: grey;
}

Chỉ chọn class con cuối cùng

Trong danh sách của một trang web, việc chọn mục cuối cùng trong danh sách và tạo cho nó một kiểu hiển thị khác, chẳng hạn như không có đường viền phân cách phía dưới là điều khá phổ biến. Bởi vậy, chúng ta chỉ cần thay đổi bộ chọn.

<ul class="menu">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

ul.menu li {
	border-bottom: 1px solid grey;
}

ul.menu li:last-child {
	border-bottom: 0;
}