Hướng dẫn css word selector - bộ chọn từ css

• Trang chủ
• Tham khảo
• CSS
• Selector

Bộ chọn CSS [selectors]

Bộ chọn [selectors] được dùng để chọn các thành phần muốn định dạng css.

Đầu trang

Trong CSS, selector [tạm gọi là bộ chọn] là mẫu để chọn phần tử HTML mà bạn muốn định nghĩa phong cách. Các selector được áp dụng cho các trường hợp sau:selector [tạm gọi là bộ chọn] là mẫu để chọn phần tử HTML mà bạn muốn định nghĩa phong cách. Các selector được áp dụng cho các trường hợp sau:

• Tất cả phần tử theo một dạng cụ thể nào đó, ví dụ phần tử tiêu đề h2.
• Thuộc tính id và class của các phần tử.
• Các phần tử dựa vào mối liên quan với các phần tử khác trong cây phân cấp tài liệu.

Chọn phần tử theo thuộc tính class

Thuộc tính class có thể áp dụng cho bất kỳ phần tử nào trong HTML, ví dụ định nghĩa class=”dammio” cho phần tử div như sau.

Nội dung ví dụ --- dammio.com

Khi đó để chọn phần tử theo thuộc tính class ở CSS bạn phải thêm dấu chấm [.] và giá trị thuộc tính. Ở ví dụ trên đó là .dammio như sau.thêm dấu chấm [.] và giá trị thuộc tính. Ở ví dụ trên đó là .dammio như sau.

 

.dammio { color:blue; }




Nội dung ví dụ --- dammio.com

Nếu bạn muốn chọn tất cả thuộc tính class cùng với thuộc tính class khác bạn có thể chọn .class1.class2. Hãy xét đến ví dụ sau..class1.class2. Hãy xét đến ví dụ sau.

 

.dammio.dammio1 { color:red; }





	Nội dung ví dụ --- dammio.com

Nếu bạn muốn chọn tất cả thuộc tính class bên trong 1 phần tử chứa thuộc tính class khác thì bạn có thể chọn .class1 .class2. Hãy xét đến ví dụ sau..class1 .class2. Hãy xét đến ví dụ sau.

 

.dammio .dammio1 { color:red; }





	
Nội dung ví dụ --- dammio.com

Trong ví dụ trên thì chúng ta xét chọn class=”dammio01″ có tổ tiên là phần tử bất kỳ miễn có thuộc tính class=”dammio”.

Chọn phần tử có thuộc tính id

Trái với thuộc tính class, để chọn phần tử có thuộc tính id thì chúng ta thêm dấu # với giá trị của thuộc tính.dấu # với giá trị của thuộc tính.

 

#dammio { color:yellow; }




Nội dung ví dụ --- dammio.com

Nếu thuộc tính id cũng nằm trong phần tử chứa thuộc tính id khác thì bạn cũng dùng tương tự đó #id #id2. Hãy xem ví dụ sau.

 

#dammio #dammio1 { color:green; }





	

		Nội dung ví dụ --- dammio.com
	

Chọn tất cả các phần tử trong tài liệu HTML

Nếu bạn muốn chọn hết tất cả phần tử để định nghĩa phong cách thì bạn có thể dùng dấu *. Khi đó, bạn không cần quan tâm đến tên thuộc tính và giá trị thuộc tính nữa. Cách này thường áp dụng để định nghĩa phong cách trong tài liệu HTML.

 

* { color:yellow; }





	

		Nội dung ví dụ --- dammio.com
	

Chọn phần tử HTML

Nếu bạn muốn chọn phần tử HTML thì bạn chỉ cần ghi tên phần tử đó trong CSS. Ví dụ như sau.

 

h2{ color:yellow; }
h2 { color:blue; }
span { color:red; }




Tiêu đề h2 --- dammio.com
Tiêu đề h2 --- dammio.com
Tiêu đề h2 --- dammio.com

Lưu ý chỉ dùng cách này cho các phần tử HTML được định nghĩa theo tiêu chuẩn của W3C. Một số phần tử HTML mới và lạ [hiếm] có thể không sử dụng được.

Bạn cũng có thể chọn phần tử HTML theo nhiều cách khác như sau:

Một số trường hợp ở trên bạn có thể thấy mơ hồ, vì vậy hãy diễn giải thông qua các ví dụ sau.

Ví dụ về element>element

Bạn có thể thấy ở ví dụ sau chỉ có phần tử span là con trực tiếp của div mới có thể có phong cách chữ màu xanh dương.

 

div>span {color:blue;}





	Nội dung CSS --- dammio.com
	

		Dòng chữ này không có màu xanh vì không là con trực tiếp.
	

Ví dụ về element+element

Bạn có thể thấy chỉ 1 phần tử span nằm sau thẻ div mới có chữ màu xanh. Những phần tử span khác đều không có chữ màu xanh.chỉ 1 phần tử span nằm sau thẻ div mới có chữ màu xanh. Những phần tử span khác đều không có chữ màu xanh.

 

div+span {color:blue;}





	Dòng chữ này không có màu xanh vì không đặt sau thẻ div.

Dòng chữ màu xanh --- dammio.com

Dòng chữ màu xanh --- dammio.com

Ví dụ về element~element

Trong ví dụ sau, bạn có thể thấy tất cả phần tử span nằm sau phần tử div đều có dòng chữ màu xanh.tất cả phần tử span nằm sau phần tử div đều có dòng chữ màu xanh.

 

.dammio { color:blue; }




Nội dung ví dụ --- dammio.com

Chọn phần tử theo thuộc tính bất kỳ

Ngoài thuộc tính id và class là trường hợp đặc biệt, nếu bạn muốn chọn phần tử có thuộc tính bất kỳ thì bạn có thể dùng cú pháp [tên thuộc tính]. Ví dụ phần tử a có chứa thuộc tính thì sẽ có chữ màu đỏ.[tên thuộc tính]. Ví dụ phần tử a có chứa thuộc tính thì sẽ có chữ màu đỏ.

 

.dammio { color:blue; }




Nội dung ví dụ --- dammio.com

Ngoài ra còn có nhiều cách sử dụng thuộc tính khác hiếm khi sử dụng trong CSS như sau.

• [attribute=value]: chọn tất cả thuộc tính kèm theo giá trị
• [attribute~=value]: chọn tất cả thuộc tính mà giá trị có chứa cụm từ đầu vào, cụm từ này phải đứng riêng biệt cách các cụm khác bằng khoảng trắng.
• [attribute|=value]: chọn tất cả thuộc tính có giá trị bắt đầu với cụm từ đầu vào và ngăn cách bằng dấu gạch ngang.
• [attribute^=value]: chọn tất cả thuộc tính có giá trị bắt đầu với cụm từ đầu vào
• [attribute$=value]: chọn tất cả thuộc tính có giá trị kết thúc là cụm từ đầu vào
• [attribute*=value]: chọn tất cả thuộc tính có giá trị chứa chuỗi con là cụm từ đầu vào.

Chọn thuộc tính bằng dấu hai chấm [:]

Chắc hẳn, nhiều bạn rất quen thuộc với cách chọn a:hover để tạo hiệu ứng cho các liên kết khi người dùng rê chuột vào liên kết đó. a:hover để tạo hiệu ứng cho các liên kết khi người dùng rê chuột vào liên kết đó.

Ví dụ khi rê chuột liên kết thì sẽ có dòng chữ màu đỏ.

 

.dammio { color:blue; }




Nội dung ví dụ --- dammio.com

Trong cách chọn phần tử bằng dấu hai chấm thì còn có rất nhiều cách khác nữa mà không thể trình bày chi tiết hết trong bài viết. Hi vọng bạn sẽ tự tìm hiểu thêm và bài viết sẽ mang nhiều kiến thức cho bạn về CSS.