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.

sử dụng class con trong class khác

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>
Tệp CSS của bạn sẽ như thế này:
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;
}
Để chỉ áp dụng cho phần con đầu tiên của footer, tệp CSS của bạn sẽ như thế này:
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>
Tệp CSS của bạn sẽ như thế này:
ul.menu li {
	border-bottom: 1px solid grey;
}

ul.menu li:last-child {
	border-bottom: 0;
}
Trên đây là cách để bạn Css cho một class con trong  một class khác, hi vọng trong quá trình thiết kế website bạn sẻ cần sử dụng đến chúng, xin cám ơn!
4.9/5 - (8729 bình chọn)

Bài Viết Liên Quan

Hướng Dẫn Kích hoạt Theme Flatsome

Để kích hoạt theme Flatsome của Alodigital, bạn có thể làm theo các bước sau....

Hướng dẫn cài đặt theme giao diện website lên hosting

Hướng dẫn cài đặt theme giao diện website trên kho theme của Alodigital.vn lên hosting...

Thanh Toán Quét Mã QR Code Tự Động – MoMo, ViettelPay, VNPay và 40 ngân hàng Việt Nam

Giới thiệu giải pháp thanh toán mã QR code tự động thông báo hoàn thành....

Hướng dẫn Kết nối Contact Form với Google Sheet để đồng bộ dữ liệu

Alodigital.vn sẽ hướng dẫn cho các bạn cách lấy Leads (thông tin khách hàng) từ...