Bộ chọn CSS cho phép các nhà phát triển web áp dụng các kiểu cho một phần tử cụ thể hoặc một tập hợp các phần tử trên một trang web.
Khi làm việc với bộ chọn, bạn có thể quyết định chỉ muốn nhắm mục tiêu các phần tử có thuộc tính cụ thể. Đó là nơi có bộ chọn thuộc tính CSS. Bộ chọn thuộc tính giúp bạn chỉ áp dụng một số kiểu nhất định cho các phần tử có thuộc tính cụ thể.
Hướng dẫn này sẽ thảo luận về cách sử dụng bộ chọn thuộc tính CSS khi tạo kiểu cho các phần tử. Khi đọc xong hướng dẫn này, bạn sẽ trở thành chuyên gia trong việc sử dụng công cụ chọn thuộc tính để tạo kiểu cho các phần tử.
Thuộc tính HTML
Trong HTML, các thuộc tính được sử dụng để xác định các đặc điểm hoặc thuộc tính bổ sung của một phần tử. Ví dụ:thuộc tính height đặt chiều cao của hình ảnh và thuộc tính title đặt tiêu đề của phần tử web.
Bạn khai báo các thuộc tính bằng cách sử dụng cấu trúc cặp tên / giá trị. Điều này có nghĩa là, trong tệp HTML, một thuộc tính sẽ xuất hiện như sau: name=“value” . Để tìm hiểu thêm về các thuộc tính trong HTML, hãy đọc hướng dẫn của chúng tôi về các thuộc tính HTML.
Bộ chọn thuộc tính CSS
Khi thiết kế một trang web, bạn có thể muốn áp dụng một kiểu cho các phần tử dựa trên việc các phần tử đó có một giá trị thuộc tính cụ thể hay không. Bạn sử dụng bộ chọn thuộc tính CSS để làm như vậy.
Hai bước bạn sẽ thực hiện khi sử dụng công cụ chọn thuộc tính là:
- Đặt tên của thuộc tính trong dấu ngoặc vuông.
- Chỉ định kiểu bạn muốn áp dụng cho các thuộc tính có tên đó.
Hãy cùng khám phá một vài ví dụ về công cụ chọn thuộc tính CSS đang hoạt động.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
CSS [Thuộc tính]
Dạng cơ bản nhất của công cụ chọn thuộc tính là:[attribute] . Nói một cách đơn giản, bạn đặt tên của một thuộc tính trong dấu ngoặc vuông.
Giả sử chúng ta muốn đặt kích thước phông chữ của mọi phần tử có thuộc tính tiêu đề là 16px. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
[title] {
font-size: 16px;
}
Mã trong quy tắc CSS của chúng tôi sẽ chỉ áp dụng cho các phần tử có thuộc tính tiêu đề. Kích thước phông chữ của bất kỳ phần tử nào có thuộc tính title được chỉ định — bất kể thuộc tính đó lưu trữ giá trị nào — sẽ thay đổi thành 16px theo quy tắc ở trên.
Bạn có thể làm cho bộ chọn thuộc tính của mình chính xác hơn bằng cách chỉ định một hoặc cả hai điều sau:
- loại phần tử cụ thể mà quy tắc sẽ áp dụng
- giá trị ID thuộc tính của nó (chẳng hạn như “tiêu đề” cho văn bản, “href” cho một liên kết hoặc “lớp” cho bất kỳ phần tử nào).
Ví dụ:giả sử bạn muốn đặt kích thước của tất cả văn bản tiêu đề đoạn văn là 16 px. Bạn có thể làm như vậy bằng cách sử dụng mã này:
[title] {
font-size: 16px;
}
Chữ cái p ở đầu công cụ chọn thuộc tính yêu cầu trình duyệt chỉ áp dụng kiểu phông chữ cho <p> các thẻ. [title] một phần của bộ chọn hướng dẫn trình duyệt chỉ áp dụng kiểu phông chữ cho các thẻ
có title thuộc tính được chỉ định.
Do đó, sau khi đọc đoạn mã này, trình duyệt sẽ chuyển đổi kích thước phông chữ của tất cả các tiêu đề đoạn văn (p) thành 16 px. Mã này sẽ không ảnh hưởng đến bất kỳ văn bản nào khác trên trang.
CSS [thuộc tính =“giá trị”]
[attribute=“value”] bộ chọn thuộc tính cho phép người viết mã chỉ áp dụng kiểu cho các phần tử có giá trị thuộc tính bằng giá trị được chỉ định trong bộ chọn.
Giả sử chúng ta muốn đặt màu nền của tất cả các liên kết đến trang chủ của Career Karma thành màu cam. Kiểu này phải đặt màu nền của a phần tử sang màu da cam. Chúng tôi có thể thực hiện hành động này bằng cách sử dụng mã CSS sau:
a[href="careerkarma.com"] {
background-color: orange;
}
Quy tắc này chọn tất cả các phần tử trên trang web của bạn có thuộc tính href bằng careerkarma.com . Sau đó, nó đặt màu nền của tất cả các yếu tố đó thành màu cam.
CSS [thuộc tính ~ =“giá trị”]
[attribute~=“value”] bộ chọn cho phép bạn chọn các phần tử có giá trị thuộc tính chứa một từ cụ thể.
Ví dụ:giả sử bạn muốn áp dụng một kiểu cho tất cả p các phần tử có tiêu đề khớp với từ blue . Đối với phong cách này, màu văn bản của các phần tử này nên được thay đổi thành màu xanh lam.
Chúng tôi có thể sử dụng quy tắc sau để thực hiện nhiệm vụ này:
p[title~="blue"] {
color: blue;
}
Quy tắc này sẽ tìm tất cả các thẻ
được liên kết với các tiêu đề có chứa từ “xanh lam” và sẽ đặt màu văn bản của văn bản trong các thẻ
đó thành màu xanh lam. Vì vậy, nếu thẻ
có tiêu đề blue color hoặc blue color , phong cách này sẽ được áp dụng. Tuy nhiên, quy tắc này sẽ không áp dụng cho thẻ
có tiêu đề blueColor bởi vì từ blue không hiện diện độc lập trong thuộc tính.
Điều này khác với *= selector , không chỉ có thể tìm thấy một từ cụ thể trong một thuộc tính mà còn có thể tìm thấy một giá trị cụ thể trong một thuộc tính.
CSS [thuộc tính | =“giá trị”]
[attribute|=“value”] bộ chọn cho phép bạn chọn các phần tử có thuộc tính bắt đầu bằng một giá trị được chỉ định (ví dụ:“trên cùng”). Điều này bao gồm các phần tử có thuộc tính bắt đầu bằng giá trị được chỉ định và chứa dấu gạch ngang theo sau là văn bản bổ sung (ví dụ:“kiểu đầu” và các giá trị “hàng đầu” khác). Lưu ý rằng mã yêu cầu một thanh dọc (|) sau từ “lớp”.
Ví dụ:giả sử bạn muốn chỉ định một phần đệm 10px trên cùng cho mọi <div> phần tử có thuộc tính lớp bắt đầu bằng top , bao gồm những giá trị được theo sau bởi các giá trị được phân tách bằng dấu gạch nối khác. Bạn có thể làm như vậy bằng cách sử dụng mã này:
div[class|="top"] {
padding-top: 10px;
}
Quy tắc này sẽ áp dụng một phần đệm 10px lên đầu mỗi phần tử
top , bao gồm các phần tử có tên lớp bắt đầu bằng top- . Điều quan trọng cần lưu ý là giá trị bạn chỉ định phải là một từ toàn bộ hoặc một từ được theo sau bởi dấu gạch ngang. Nói cách khác, kiểu ở trên của chúng tôi sẽ áp dụng cho các phần tử
top style và top-style , nhưng không đối với phần tử topstyle . CSS [thuộc tính ^ =“giá trị”]
[attribute^=“value”] bộ chọn được sử dụng để chọn các phần tử có giá trị thuộc tính bắt đầu bằng một giá trị cụ thể. Giá trị bạn chỉ định không nhất thiết phải là một từ toàn bộ, không giống như [attribute|=“value”] bộ chọn chúng ta đã thảo luận trước đó.
Giả sử chúng ta muốn áp dụng đệm dưới cùng 10px cho mọi phần tử
paddingBottom . Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:div[class^="paddingBottom"] {
padding-bottom: 10px;
}
Trình duyệt web của người dùng sẽ áp dụng kiểu padding-bottom mà chúng tôi đã xác định cho tất cả các thẻ
CSS [thuộc tính $ =“giá trị”]
Toán tử $= operator được sử dụng để chọn tất cả các phần tử có giá trị thuộc tính kết thúc bằng một giá trị cụ thể. Ví dụ:giả sử bạn muốn thay đổi màu văn bản thành màu xám của tất cả văn bản siêu liên kết có giá trị thuộc tính href kết thúc bằng .app . Bạn có thể làm như vậy bằng cách sử dụng mã này:
a[href$=".app"] {
color: gray;
}
Bộ chọn này sẽ áp dụng cho tất cả phần tử trên trang web của bạn có giá trị href kết thúc bằng .app .
CSS [thuộc tính * =“giá trị”]
Toán tử *= operator cho phép bạn chọn tất cả các phần tử có giá trị thuộc tính chứa một giá trị cụ thể. Không giống như toán tử ~= operator , bộ chọn thuộc tính này có thể tìm một giá trị cụ thể trong một lớp, không chỉ một từ đơn lẻ.
Ví dụ:giả sử bạn muốn áp dụng đệm 50px xung quanh tất cả các thẻ
allPadding . Bạn có thể làm như vậy bằng cách sử dụng quy tắc này:div[class*="allPadding"] {
padding: 50px;
}
Quy tắc này sẽ đặt một vùng đệm 50px xung quanh tất cả các phần tử HTML với các thuộc tính lớp có chứa thuật ngữ allPadding . Vì vậy, các phần tử có tên lớp new allPadding , surround allPadding red , allPaddingblue và allPadding-true tất cả sẽ tùy thuộc vào phong cách này.
Kết luận
Bộ chọn thuộc tính CSS cho phép nhà phát triển chọn các phần tử dựa trên các giá trị thuộc tính của chúng và áp dụng các kiểu cụ thể cho các phần tử đó.
Hướng dẫn này đã thảo luận, có tham chiếu đến các ví dụ, kiến thức cơ bản về bộ chọn thuộc tính và cách sử dụng tất cả các loại bộ chọn thuộc tính CSS. Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng công cụ chọn thuộc tính CSS như một người chuyên nghiệp.
CSS là một trong ba kỹ năng chính được sử dụng trong phát triển web. Tải xuống ứng dụng Career Karma miễn phí hôm nay để trò chuyện với một chuyên gia huấn luyện nghề nghiệp, người có thể giúp tư vấn cho bạn về các kỹ năng bạn cần để bắt đầu sự nghiệp với tư cách là nhà phát triển web.