CSS Selector kết hợp

21/05/2019

Bài sau » « Bài trước

CSS Selector kết hợp có thể chứa nhiều bộ chọn (selector) đơn lẻ. Giữa 2 selector đơn lẻ ta có thể kết hợp chúng lại. Ta có 4 cách kết hợp khác nhau:

  • Dùng khoảng trắng : Chọn con cháu chút chít
  • Dùng dấu > : Chọn theo con
  • Dùng dấu + : Chọn theo anh em liền kề
  • Dùng dấu ~ : Chọn theo anh em chung

Chọn phần tử con cháu

Sử dụng khoảng trắng giữa các selector để chọn tất cả phần tử con cháu của phần tử chỉ định.

Ví dụ bên dưới chọn tất cả thẻ <p> là con, cháu của thẻ <div> .

<!DOCTYPE html> <html> <head> <style> div p { background-color: yellow; } </style> </head> <body> <div> <p>Đoạn text 1 trong thẻ div.</p> <p>Đoạn text 2 trong thẻ div.</p> <section><p>Đoạn text 3 trong thẻ div.</p></section> </div> <p>Đoạn text 4. Không nằm trong div.</p> <p>Đoạn text 5. Không nằm trong div.</p> </body> </html>

Kết quả hiển thị như sau: Đoạn Text 1,2 là con và Đoạn text 3 là cháu của DIV đều hiển thị.

Đoạn text 1 trong thẻ div.

Đoạn text 2 trong thẻ div.

Đoạn text 3 trong thẻ div.

Đoạn text 4. Không nằm trong div.

Đoạn text 5. Không nằm trong div.

Chọn phần tử con

Sử dụng > để chọn những phần tử con của phần tử chỉ định.

Ví dụ sau chọn những thẻ <p> là con của thẻ <div>

<!DOCTYPE html> <html> <head> <style> div > p { background-color: yellow; } </style> </head> <body> <div> <p>Đoạn text 1 trong thẻ div.</p> <p>Đoạn text 2 trong thẻ div.</p> <section><p>Đoạn text 3 trong thẻ div.</p></section> </div> <p>Đoạn text 4. Không nằm trong div.</p> <p>Đoạn text 5. Không nằm trong div.</p> </body> </html>

Kết quả hiển thị như sau: Chỉ có Đoạn text 1 và 2 là con của DIV nên hiển thị. 

Đoạn text 1 trong thẻ div.

Đoạn text 2 trong thẻ div.

Đoạn text 3 trong thẻ div.

Đoạn text 4. Không nằm trong div.

Đoạn text 5. Không nằm trong div.

Chọn theo anh em liền kề

Dùng kí hiệu + để chọn phần tử là anh em liền kề với phần tử chỉ định. Nói dễ hiểu hơn là phần tử nằm ngay sau phần tử chỉ định.

Ví dụ sau chọn phần tử <p> ngay sau phần tử <div>

<!DOCTYPE html> <html> <head> <style> div + p { background-color: yellow; } </style> </head> <body> <div> <p>Đoạn text 1 trong thẻ div.</p> <p>Đoạn text 2 trong thẻ div.</p> <section><p>Đoạn text 3 trong thẻ div.</p></section> </div> <p>Đoạn text 4. Không nằm trong div.</p> <p>Đoạn text 5. Không nằm trong div.</p> </body> </html>

Kết quả hiển thị như sau: Chỉ có Đoạn text 4 là anh em liền kề của DIV nên hiển thị. 

Đoạn text 1 trong thẻ div.

Đoạn text 2 trong thẻ div.

Đoạn text 3 trong thẻ div.

Đoạn text 4. Không nằm trong div.

Đoạn text 5. Không nằm trong div.

Chọn theo anh em chung

Dùng dấu ~ để chọn theo anh em chung. Có nghĩa là chọn tất cả các phần tử phía sau và đồng cấp với phần tử chỉ định. Xem ví dụ bên dưới để rõ hơn.

Chọn tất cả thẻ <p> là anh em với thẻ <div>

<!DOCTYPE html> <html> <head> <style> div ~ p { background-color: yellow; } </style> </head> <body> <div> <p>Đoạn text 1 trong thẻ div.</p> <p>Đoạn text 2 trong thẻ div.</p> <section><p>Đoạn text 3 trong thẻ div.</p></section> </div> <p>Đoạn text 4. Không nằm trong div.</p> <p>Đoạn text 5. Không nằm trong div.</p> </body> </html>

Kết quả hiển thị như sau: Chỉ có Đoạn text 4 và 5 là anh em chung với DIV nên hiển thị. 

Đoạn text 1 trong thẻ div.

Đoạn text 2 trong thẻ div.

Đoạn text 3 trong thẻ div.

Đoạn text 4. Không nằm trong div.

Đoạn text 5. Không nằm trong div.

Bài hướng dẫn CSS Selector kết hợp đến đây là hết. Tuy nội dung khá ít và đơn giản, nhưng ý nghĩa thì vô cùng quan trọng trong việc viết code CSS nhé các bạn. Phải chắc chắn hiểu nó thật rõ để viết CSS cho đúng và tối ưu code nhé. Chúc các bạn thực hành tốt. Các bạn để lại bình luận phía dưới nếu có chỗ nào chưa hiểu nhé.

Bài sau » « Bài trước
Back to top