Chọn tất cả anh em của phần tử đứng sau - element1 ~ element2 - trong CSS

Trong thế giới của CSS, việc chọn các phần tử dựa trên vị trí của chúng so với các phần tử khác là một kỹ năng cần thiết để thiết kế giao diện người dùng phức tạp. Một trong những cách chọn phần tử thú vị là chọn tất cả anh em của phần tử đứng sau một phần tử cụ thể. Điều này có thể được thực hiện thông qua selector rất hữu ích mang tên general sibling combinator và adjacent sibling combinator.

1. General sibling combinator (~): General sibling combinator được sử dụng để chọn tất cả các phần tử là anh em của một phần tử cụ thể, mà sau nó trong cấu trúc HTML.

   Ví dụ:

   <div class="parent">
     <div class="first"></div>
     <div class="second"></div>
     <div class="third"></div>
   </div>
   

   Để chọn tất cả các phần tử div đứng sau phần tử có class là first, chúng ta viết CSS như sau:

   .first ~ div {
     background-color: yellow;
   }
   

   Trong ví dụ này, selector .first ~ div sẽ chọn cả div.second và div.third vì chúng là các phần tử div đứng sau phần tử div.first.

2. Adjacent sibling combinator (+): Adjacent sibling combinator chỉ chọn phần tử anh em đầu tiên đứng ngay sau phần tử cụ thể.

   Ví dụ:

   <div class="parent">
     <div class="first"></div>
     <div class="second"></div>
     <div class="third"></div>
   </div>
   

   Để chọn phần tử div đầu tiên đứng ngay sau div.first, chúng ta có thể viết CSS:

   .first + div {
     background-color: yellow;
   }
   

   Trong ví dụ này, selector .first + div sẽ chỉ chọn div.second vì nó là phần tử đứng ngay sau div.first.

Kết hợp cả hai cách

Tùy vào mục đích thiết kế giao diện cụ thể, đôi khi bạn cần kết hợp cả hai phương pháp để đạt được kết quả mong muốn. Sự kết hợp này giúp kiểm soát tốt hơn cách các phần tử sẽ hiển thị và ứng xử trên trang web.

Một số lưu ý:

• Hai selectors trên sẽ hoạt động chỉ khi các phần tử là anh em trực tiếp cùng một cấp trong cây DOM.
• Sử dụng selectors một cách hợp lý để tránh tăng độ phức tạp của CSS và giúp mã CSS dễ bảo trì hơn.

Việc thành thạo cách chọn các phần tử anh em giúp bạn dễ dàng quản lý và áp dụng các kiểu dáng CSS, nâng cao tính hiệu quả và rõ ràng khi phát triển giao diện trang web.