Trong bài viết này, mình sẽ chia sẻ với bạn các CSS selectors hữu ích và cách sử dụng chúng để tối ưu code cho trang web của bạn hơn.
Mục lục
Thêm trạng thái active bằng ::target
Mình có một layout như thế này.
Khi nhấn vào link trên navbar, nó sẽ active card có href và id giống nhau. Ví dụ trực quan hơn ở codepen sau
See the Pen :target by minhchau (@ngocminhxx) on CodePen.
Trong ví dụ này, mình không cần JS để bắt sự kiện onlick để add class “active” nữa. Mình sẽ sử dụng CSS selector ::target
:target {
border: 2px solid red;
}Có thể hiểu đơn giản ::target sẽ dựa vào href của anchor link để select element có id tương ứng. Nếu thẻ a của bạn có href=”#card-1″, khi bạn click vào thẻ a đó, element có id=”card-1″ sẽ được chọn
CSS Selector empty tag
Nếu bạn từng phải sửa những code HTML do phần mềm tự động generate ra, chắc hẳn đã không ít bạn sẽ bắt gặp những tag HTML không có nội dung bên trong. Tuy nhiên, nó lại ảnh hưởng đến giao diện của bạn, chẳng hạn như tạo ra khoảng trống. Để ẩn những tag trống ấy đi, bạn hãy dùng ::empty
:empty {
display: none;
}Hạn chế của cách này là nếu tag của bạn có khoảng trắng (từ nút spacebar trên bàn phím, kí tự ẩn…) thì tag đó sẽ không được coi là empty. Nói chung, một tag được xem là empty nếu giữa mở tag và đóng tag không có gì cả
<p></p>
<h1></h1>
<span></span>See the Pen CSS empty by minhchau (@ngocminhxx) on CodePen.
Khi parent chỉ có duy nhất 1 child
Trong ví dụ dưới đây, chúng ta có 3 card, nhưng card đầu tiên chỉ có title
Yêu cầu được đưa ra là style chữ màu đó cho những các chỉ có title
<div class="container">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>Bạn có thể check code HTML, tìm những card chỉ có title và thêm class để style cho chúng, hoặc đơn giản bạn có thể sử dụng :only-child
.card-body {
.card-title {
&:only-child {
color: red;
}
}
}Ý nghĩa của code trên là bạn sẽ chọn những .card-title có parent là .card-body và chúng là con duy nhất của cha nó. Những .card-body chỉ có duy nhất một child và child đó là .card-title
See the Pen Untitled by minhchau (@ngocminhxx) on CodePen.
Khác nhau giữa :only-child và :only-of-type
Mình sẽ giải thích sự khác nhau dựa vào ví dụ dưới, chúng ta sẽ select .card-title
<div class="container">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div> .card-body {
.card-title {
&:only-child {
color: red;
}
}
}:only-child sẽ select .card-title là con duy nhất của .card-body. Nghĩa là trong .card-body chỉ có .card-title là con.
:only-of-type sẽ select .card-title là con duy nhất nếu không có .card-title nào khác nữa. Trong .card-body vẫn có thể có các thẻ con khác nhưng chỉ có duy nhất một .card-title
Bạn xét ví dụ dưới sẽ hiểu rõ hơn
See the Pen only-of-type by minhchau (@ngocminhxx) on CodePen.
Tổng kết
Với một vài selector trên, CSS có thể giải quyết nhiều vẫn đề về selectors mà bạn không cần phải đụng tới JS, code và task của bạn sẽ đơn giản và nhẹ nhàng hơn. Hi vọng sự chia sẻ của mình sẽ giúp ích được các bạn.