Tìm hiểu về CSS3 Pseudo-Classes - Phần I

<div>
  <p><strong>Paragraph 1:</strong>Tiramisu gummi bears faworki dragee. Faworki faworki dessert sweet. Souffle powder biscuit lemon drops topping wypas.</p>
 
  <blockquote>
    <p><strong>Blockquote</strong> Oat cake sugar plum tiramisu jelly cupcake dragee powder. Caramels pastry pie danish fruitcake bonbon chocolate cake bear claw.</p>
  </blockquote>
 
  <p><strong>Paragraph 2:</strong>Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.</p>
 
  <p><strong>Paragraph 3:</strong> Oat cake pastry chocolate dessert brownie wafer candy. Caramels chocolate cake marzipan. Biscuit candy pudding dessert brownie dragee halvah donut gummi bears.</p>
 
  <ul>
    <li><strong>List 1:</strong> Cotton candy apple pie topping.</li>
    <li><strong>List 2:</strong> Biscuit gummi bears sweet</li>
    <li><strong>List 3:</strong> Jujubes fruitcake bear claw chocolate bar.</li>
    <li><strong>List 4:</strong> Tart carrot cake cookie marzipan pastry toffee.</li>
    <li><strong>List 5:</strong> Wafer tiramisu marzipan tart.</li>
    <li><strong>List 6:</strong> Halvah chocolate bar.</li>
    <li><strong>List 7:</strong> Toffee sugar plum.</li>
    <li><strong>List 8:</strong> Caramels pastry pie.</li>
  </ul>
</div>

Để chọn đoạn thứ hai cuối cùng từ cấu trúc HTML ở trên, chúng ta có thể viết các quy tắc theo cách này.

p:nth-last-of-type(2) {
  padding: 15px;
  background-color: #333;
  color: #fff;
}

Không giống :nth-child hoặc :nth-last-child chọn phần tử đúng theo trình tự của chúng,lớp -of-type sẽ tìm thấy phần tử theo kiểu đã chỉ định của chúng cho dù ở giữa các phần tử có thẻ tag khác chèn vào.

:only-child

:only-child được sử dụng để chọn phần tử được chỉ định là con duy nhất của cha mẹ của nó. Hãy tưởng tượng, một phụ huynh chỉ có một đứa con trong gia đình. Tương tự, trong ví dụ sau, chúng ta chỉ có một đoạn trong một thẻ <div>.

<div>
  <p>Tiramisu gummi bears faworki dragee. Faworki faworki dessert sweet. Souffle powder biscuit lemon drops topping wypas.</p>
</div>

Để nhắm mục tiêu và thêm css cho đoạn này, chúng ta có thể viết:

p:only-child {
  padding: 15px;
  background-color: #333;
  color: #fff;
}

Tuy nhiên, khi chúng ta có nhiều phần tử con thuộc bất kỳ loại nào bên trong, điều này làm cho pseudo-class này không hoạt động, vì phần tử được chỉ định không còn là phần tử con duy nhất dưới cha mẹ của nó.

: :only-of-type

:only-of-type lớp giả hoạt động tương tự như** :only-child**. Nhưng ngoài chuỗi, nó cũng sẽ tìm thấy phần tử từ loại của chúng. Hãy tưởng tượng một phụ huynh có 3 đứa con gồm hai gái và một trai. Chúng ta có thể nhắm vào cậu bé với class này , vì cậu là cậu bé duy nhất trong gia đình.

Trong ví dụ sau, chúng ta có hai đoạn p và một blockquote.

<p><strong>Paragraph 1:</strong>Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.</p>
 
<blockquote><strong>Blockquote:</strong> Oat cake pastry chocolate dessert brownie wafer candy.</p></blockquote>
 
<p><strong>Paragraph 2:</strong>Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.</p>

Để chọn <blockquote>phần tử trong số các đoạn này, chúng ta có thể viết nó theo cách này:

blockquote:only-of-type {
  padding: 15px;
  background-color: #333;
  color: #fff;
}

Cùng xem 2 ảnh dưới đây để hiểu hơn về class này: Ví dụ này sẽ rõ ràng hơn

:empty

:empty chỉ định là trống rỗng. Nói cách khác, phần tử này không có nội dung hoặc phần tử con, nó không có gì, thậm chí không có khoảng trắng. Trong ví dụ sau, chúng ta có một đoạn trống trong một thẻ div <div>.

<div>
  <p></p>
</div>

Để nhắm mục tiêu phần tử đoạn theo điều kiện này, chúng ta có thể viết:

p:empty {
  padding: 15px;
  background-color: #333;
  color: #fff;  
}

Cái này khá là hay phải không nào?

Kết luận

Mình đã đề cập đến một số pseudo-class trong bài viết này. Mình hy vọng rằng đây sẽ là một tài liệu tham khảo tốt để bạn làm việc với css và nâng cao trình độ của bản thân. Còn rẩt nhiều pseudo-class nữa. Mình sẽ viết trong bài sau. Các bạn nhớ đón đọc nhé. Happy hacking!