Khái niệm
Hiểu đơn giản CSS Selector là thứ cho phép bạn nhắm mục tiêu tới các phần tử HTML để áp dụng các thuộc tính CSS cho chúng. CSS Selector giống như là đường đẫn, chỉ định để cho CSS biết bạn đang muốn điều chỉnh, tạo kiểu cho phần tử HTML nào vậy nhờ đó đơn giản hóa quá trình làm việc với CSS của lập trình viên.
3 nhóm selector quan trọng trong CSS dể gây nhầm lẩn
1. Selector có khoảng trắng và không có khoảng trắng
Sẽ có rất nhiều bạn mới sử dụng sẽ bị phân vân khi nào thì thêm khoảng trắng vào trong selector và khi nào thì không. Vậy hãy cùng xem qua ví dụ cụ thể dưới đây.
Đề bài yêu cầu trong CSS trỏ đến item2 từ vị trí của item1, với Selector có khoảng trống ta sẽ giải quyết như sau:
Với công thức của khoảng trống hệ thống sẽ hiểu như sau: tìm đến item2 đang nằm bên trong item1.
Nhưng nếu bây giờ xóa dấu khoảng trống đi thì nó sẽ không thể hoạt động. Để nó có thể hoạt động được, ở HTML ta phải sửa lại như sau:
Bởi vì theo nguyên tắc của selector khi không có khoảng trống, hệ thống sẽ hiệu là các thuộc tính được liệt kê phải nằm cùng cấp và phải cùng được khai báo chung trong một phần tử.
2. Selector có khoảng trống và selector ">"
Để triển khai so sánh sự khác nhau giửa hai loại selector CSS gây nhầm lẩn này ta thử tạo ra một HTML như sau:
Đề bài yêu cầu trong CSS trỏ đến item2 từ vị trí của item1, với Selector có khoảng trống ta sẽ giải quyết như sau:
Với công thức của khoảng trống hệ thống sẽ hiểu như sau: tìm đến item2 đang nằm bên trong item1.
Vậy nếu bây giờ ta thay khoảng trống bằng dấu ngoặc ngọn.
Và theo như kết quả nhìn thấy được thì kết quả của hai loại selector CSS này hoàn toàn giống nhau. Vậy nó có thực sự giống nhau không vì nếu đã giống nhau như vậy tại sao phải tồn tại hai loại selector này.
Ta thử đi đến một ví dụ khác.
Đề bài bây giờ sẽ yêu cầu lập trình viên xác định được item3 đứng từ vị trí của item1. với Selector khoảng trắng ta làm như sau:
Và đương nhiên rồi nó vẩn hoạn động bình thường, bởi vì nguyên tắc của dấu khoảng trắng ở đây đó là tìm đến item đứng sau khoảng trắng với điều kiện item đó nằm bên trong item đứng trước, cụ thể thì item3 này phải nằm trong item1 và theo HTML thì nó thỏa điều kiện này.
Vậy tiếp tục chúng ta thay khoảng trống bằng selector CSS dấu ngoặc ngọn.
Đã có vẩn đề sảy ra, hệ thống đã không tìm thấy item3 nào nằm bên trong item1 ư ? Vậy nguyên tắc hoạt động của selector dấu ngoặc nhọn trong CSS là gì ?
Selector dấu ngoặc nhọn trong CSS thực ra sẽ hoạt động theo nguyên tắc sau: item đứng sau ngoặc nhọn phải là con của item đứng trước ngoặc nhọn. Vậy theo đề bài thì item3 là con của item2 và item2 là con của item1. Kết luận là item3 và item1 có quan hệ ông cháu chứ không phải cha con.
Vậy công thức đúng ở đây phải là:
Vậy là chỉ vì vô tình selector CSS của dấu ngoặc nhọn với mối quan hệ cha con đồng nghĩa với việc nó phải nằm bên trong nhau nên phần nào đó sẽ có những trường hợp tạo ra kết quả giống như selector khoảng trắng trong CSS.
3. Selector CSS dấu cộng và selector CSS dấu ngã
Ở bộ selector CSS này sẽ là một trường hợp khác khi về cơ bản dùng để kiểm tra các phần tử cùng cấp trong HTML.
Đề bài yêu cầu tìm đến item2 khi đứng từ vị trí của item1. Với Selector dấu cộng ta sẽ giải quyết như sau:
Selector dấu cộng trong CSS sẽ hoạt động theo nguyên tắc tìm đến phần tử nằm ngay sau phần tử được khai báo ban đầu, cụ thể hơn thì nó sẽ tìm những item2 nằm sau item1.
Nếu thay dấu cộng của Selector CSS này bằng dấu ngã:
Như mọi người thấy kết quả thu được không khác gì nhau. Vậy chúng ta củng có một kết luận dành cho bộ selector CSS này đó là nó củng sẽ tìm đến item2 nằm ngay sau item1.
Vậy làm sao để phân biệt được hai loại selector CSS này thì hãy cùng nhau làm thêm một ví dụ.
Hình ảnh kết quả của selector dấu cộng
Còn đây là hình ảnh của selector dấu ngã
Sự khác nhau giờ đã hoàn toàn dể dàng nhận ra, cả hai loại selector CSS này đều tìm đến các phần tử nằm sau phần tử đầu tiên được khai báo, tuy nhiên với Selector dấu cộng nó chỉ tìm đến phần tử đầu tiên gần nhất mà nó tìm thấy được còn với selector dấu ngã trong CSS nó sẽ lấy hết tất cả các item miễn chúng đều thỏa điều kiện rằng chúng nằm sau item đầu tiên được khai báo.