Bộ chọn nào dựa vào tên của các phần tử thẻ html
|
- Đối với phương pháp Inline CSS, việc xác định phần tử mà mình muốn định dạng khá là đơn giản, chúng ta chỉ cần đặt thuộc tính style vào bên trong thẻ mở của phần tử, thế là xong ! - Tuy nhiên, đối với phương pháp Internal CSS & External CSS thì việc xác định phần tử mà mình muốn định dạng là một điều tương đối khó, bởi vì nó cần phải thông qua bộ chọn.
1) Xác định bộ chọn của phần tử dựa theo id- Dưới đây là cú pháp dùng để xác định bộ chọn của một phần tử dựa theo id của nó. - Chọn phần tử có id là css Xem ví dụ 2) Xác định bộ chọn của phần tử dựa theo class- Dưới đây là cú pháp dùng để xác định bộ chọn của một phần tử dựa theo tên class của nó. - Chọn các phần tử có class là html Xem ví dụ 3) Xác định bộ chọn của phần tử dựa theo tên thẻ- Dưới đây là cú pháp dùng để xác định bộ chọn của một phần tử dựa theo tên thẻ. - Chọn các phần tử
h2{
color:blue;
}Xem ví dụ 4) Xác định bộ chọn của phần tử dựa theo thuộc tính HTML- Dưới đây là cú pháp dùng để xác định bộ chọn của một phần tử dựa theo thuộc tính HTML. - Chọn phần tử có chứa thuộc tính title Xem ví dụ 5) Xác định bộ chọn của phần tử dựa theo giá trị thuộc tính HTML- Đối với việc xác định bộ chọn của một phần tử dựa theo "giá trị thuộc tính HTML" thì nó thường được chia ra thành sáu trường hợp (tương ứng với sáu loại bộ chọn) - Giá trị của thuộc tính phải hoàn toàn trùng khớp với chuỗi ký tự được chỉ định. - Ví dụ: Chọn phần tử có thuộc tính title với giá trị là yeu - Giá trị của thuộc tính phải có chứa từ (word) được chỉ định. - Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải có chứa từ yeu - Giá trị của thuộc tính phải có chứa chuỗi ký tự được chỉ định. - Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải có chứa chuỗi yeu - Giá trị của thuộc tính phải được bắt đầu bởi chuỗi ký tự được chỉ định. - Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải bắt đầu bằng chuỗi tinh - Giá trị của thuộc tính phải được kết thúc bởi chuỗi ký tự được chỉ định. - Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải kết thúc bởi chuỗi yeu - Giá trị của thuộc tính phải được bắt đầu bởi một từ (word) được chỉ định. - Lưu ý: Từ (word) đó phải là độc lập hoặc được nối tiếp bởi một dấu gạch nối. - Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải được bắt đầu bởi từ yeu 6) Xác định bộ chọn của phần tử dựa theo nhiều yếu tố- Để xác định bộ chọn của một phần tử dựa theo nhiều yếu tố thì trước tiên chúng ta cần phải xác định bộ chọn của phần tử dựa theo từng yếu tố, sau đó ghép tất cả các bộ chọn lại với nhau. - Để xác định bộ chọn của phần tử , có class là big, có thuộc tính title với giá trị là xin chao thì bộ chọn sẽ được viết như sau:h2.big[title="xin chao"]{
color:blue;
}Xem ví dụ - Lưu ý: Tên thẻ phải luôn được đặt ở vị trí đầu tiên. 7) Chọn tất cả các phần tử- Dưới đây là cú pháp dùng để chọn hết tất cả các phần tử.
1) Pseudo-class là gì !?- Pseudo-class dịch sang tiếng Việt có thể tạm gọi là lớp giả, mỗi pseudo-class sẽ được xác định bởi một từ khóa bằng tiếng Anh, nó dùng để đại diện cho một "trường hợp đặc biệt" xảy ra đối với phần tử. - Dưới đây là danh sách các pseudo-class (các bạn vui lòng bấm vào hình để xem giải thích chi tiết về trường hợp sẽ xảy ra đối với phần tử của từng loại pseudo-class)
2) Xác định bộ chọn của phần tử dựa theo trường hợp đặc biệt- Để xác định được bộ chọn của phần tử dựa theo một "trường hợp đặc biệt" nào đó thì chúng ta cần phải ghép tên pseudo-class của trường hợp đó nằm ở ngay sát phía sau phần tử. - Dưới đây là một số ví dụ minh họa:
- Lưu ý: Đối với bốn trường hợp:
- Thiết lập đường viền màu đỏ cho các phần tử con có thứ tự chẵn (theo thứ tự từ trên xuống dưới) của phần tử #test. Xem ví dụ - Trường hợp :active xảy ra khi phần tử đang bị người dùng click vào (click bằng chuột trái hay chuột phải đều được) - Ví dụ: Thiết lập nền màu vàng cho phần tử đang bị người dùng click vào.- Trường hợp :hover xảy ra khi phần tử đang bị người dùng dí con trỏ vào. - Ví dụ: Thiết lập nền màu vàng cho phần tử đang bị người dùng dí con trỏ vào.- Trường hợp :checked thường xảy ra trên các phần tử biểu mẫu thuộc dạng checkbox hoặc radio khi chúng được đánh dấu check.
- Ví dụ: Thiết lập kích thước 30x30 cho những phần tử được đánh dấu check. - Trường hợp :root xảy ra khi phần tử là phần tử gốc của trang web.
- Ví dụ: Thiết lập nền màu hồng cho phần tử gốc của trang web. - Trường hợp :empty xảy ra khi phần tử có nội dung rỗng. - Ví dụ: Thiết lập nền màu đỏ với chiều cao 10 pixel cho các phần tử có nội dung rỗng. - Trường hợp :focus thường xảy ra trên các phần tử biểu mẫu khi chúng đang được người dùng truy cập. - Ví dụ: Thiết lập nền màu hồng cho phần tử biểu mẫu đang được người dùng truy cập. - Trường hợp :target xảy ra khi phần tử là phần tử đang được liên kết trong. - Ví dụ: Thiết lập nền màu hồng cho phần tử đang được liên kết trong. - Trường hợp :valid thường xảy trên các phần tử biểu mẫu khi chúng nhận được một giá trị hợp lệ (dựa theo thể loại của chúng) - Ví dụ:
- Ví dụ: Thiết lập nền màu vàng cho những phần tử biểu mẫu nhận được giá trị hợp lệ. - Trường hợp :invalid thường xảy ra trên các phần tử biểu mẫu khi chúng nhận phải một giá trị không hợp lệ (dựa theo thể loại của chúng) - Ví dụ:
- Ví dụ: Thiết lập nền màu đỏ cho những phần tử biểu mẫu nhận phải giá trị không hợp lệ. - Trường hợp :in-range thường xảy ra trên các phần tử kiểu number khi chúng nhận được một giá trị hợp lệ (nằm trong đoạn min - max) - Ví dụ: Thiết lập nền màu vàng cho những phần tử nhận được giá trị nằm trong đoạn min - max - Trường hợp :out-of-range thường xảy ra trên các phần tử kiểu number khi chúng nhận phải một giá trị không hợp lệ (nằm ngoài đoạn min - max) - Ví dụ: Thiết lập nền màu đỏ cho những phần tử nhận phải giá trị nằm ngoài đoạn min - max - Trường hợp :link xảy ra khi phần tử là một cái liên kết & URL của nó chưa từng được người dùng truy cập qua. - Ví dụ: Thiết lập chữ màu đỏ cho những cái liên kết mà URL của nó chưa từng được người dùng truy cập qua. - Trường hợp :visited xảy ra khi phần tử là một cái liên kết & URL của nó đã từng được người dùng truy cập qua. - Ví dụ: Thiết lập chữ màu đỏ cho những cái liên kết mà URL của nó đã từng được người dùng truy cập qua. - Trường hợp :required thường xảy ra trên các phần tử biểu mẫu khi chúng bị thiết lập thuộc tính required.
- Ví dụ: Thiết lập nền màu vàng cho những phần tử biểu mẫu bị thiết lập thuộc tính required. - Trường hợp :optional thường xảy ra trên các phần tử biểu mẫu khi chúng không bị thiết lập thuộc tính required. - Ví dụ: Thiết lập nền màu vàng cho những phần tử biểu mẫu không bị thiết lập thuộc tính required. - Trường hợp :disabled thường xảy ra trên các phần tử biểu mẫu khi chúng bị thiết lập thuộc tính disabled. - Lưu ý: Đối với những phần tử bị thiết lập thuộc tính disabled thì chúng sẽ bị vô hiệu hóa việc thao tác, điển hình như:
- Ví dụ: Thiết lập đường viền màu đỏ cho những phần tử bị thiết lập thuộc tính disabled. - Trường hợp :enabled thường xảy ra trên các phần tử biểu mẫu khi chúng không bị thiết lập thuộc tính disabled. - Ví dụ: Thiết lập đường viền màu đỏ cho những phần tử biểu mẫu không bị thiết lập thuộc tính disabled. - Trường hợp :only-child xảy ra khi phần tử là phần tử con duy nhất. - Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của với điều kiện những phần tử này phải là phần tử con duy nhất.- Trường hợp :first-child xảy ra khi phần tử là phần tử con đầu tiên. - Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của với điều kiện những phần tử này phải là phần tử con đầu tiên.- Trường hợp :last-child xảy ra khi phần tử là phần tử con cuối cùng. - Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của với điều kiện những phần tử này phải là phần tử con cuối cùng.- Trường hợp :nth-child(n) xảy ra khi phần tử là phần tử con thứ n (được xác định theo thứ tự từ trên xuống dưới) - Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của với điều kiện những phần tử này phải là phần tử con thứ 2 (được xác định theo thứ tự từ trên xuống dưới)- Trường hợp :nth-last-child(n) xảy ra khi phần tử là phần tử con thứ n (được xác định theo thứ tự từ dưới lên trên) - Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của với điều kiện những phần tử này phải là phần tử con thứ 2 (được xác định theo thứ tự từ dưới lên trên)- Trường hợp :only-of-type xảy ra khi phần tử không có bất kỳ một phần tử anh em nào có cùng kiểu thẻ (tag) với nó. - Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của với điều kiện những phần tử này không có bất kỳ một phần tử anh em nào có cùng kiểu thẻ với nó.- Trường hợp :first-of-type xảy ra khi phần tử là phần tử được khai báo đầu tiên trong số các phần tử anh em có cùng kiểu thẻ. - Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của với điều kiện những phần tử này phải là phần tử được khai báo đầu tiên trong số các phần tử anh em có cùng kiểu thẻ.- Trường hợp :last-of-type xảy ra khi phần tử là phần tử được khai báo cuối cùng trong số các phần tử anh em có cùng kiểu thẻ. - Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của với điều kiện những phần tử này phải là phần tử được khai báo cuối cùng trong số các phần tử anh em có cùng kiểu thẻ.- Trường hợp :nth-of-type(n) xảy ra khi phần tử là phần tử được khai báo thứ n (theo thứ tự từ trên xuống dưới) trong số các phần tử anh em có cùng kiểu thẻ. - Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của với điều kiện những phần tử này phải là phần tử được khai báo thứ 2 (theo thứ tự từ trên xuống dưới) trong số các phần tử anh em có cùng kiểu thẻ.- Trường hợp :nth-last-of-type(n) xảy ra khi phần tử là phần tử được khai báo thứ n (theo thứ tự từ dưới lên trên) trong số các phần tử anh em có cùng kiểu thẻ. - Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử con cháu của với điều kiện những phần tử này phải là phần tử được khai báo thứ 2 (theo thứ tự từ dưới lên trên) trong số các phần tử anh em có cùng kiểu thẻ.- Trường hợp :not(selector) xảy ra khi phần tử không phải là phần tử nằm trong số các phần tử được xác định bởi bộ chọn selector. - Ví dụ: Thiết lập đường viền màu đỏ cho các phần tử không phải là phần tử #test. |
