Articles
Giới thiệu về CSS
Chi tiết về Bộ chọn Thuộc tính trong CSS

Chi tiết về Bộ chọn Thuộc tính trong CSS

Bài viết này giải thích chi tiết về bộ chọn thuộc tính trong CSS.

Bạn có thể học cách viết khớp tới, khớp lui, và khớp một phần cho các bộ chọn thuộc tính.

YouTube Video

HTML để Xem trước

css-attribute-selector.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Pseudo Class/Element</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-attribute-selector.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Attribute Selectors</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS Attribute Selectors</h2></header>
 19        <article>
 20            <h3>element[attribute]</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24a[target] {
 25    font-weight: bold;
 26}
 27</pre>
 28                <header><h4>HTML</h4></header>
 29<pre>
 30&lt;a href="https://example.com" target="_blank"&gt;Example Link (target="_blank")&lt;/a&gt;
 31&lt;a href="https://example.com"&gt;Example Link (no target)&lt;/a&gt;
 32</pre>
 33                <header><h4>HTML+CSS</h4></header>
 34                <section class="sample-view">
 35                    <a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
 36                    <a href="https://example.com">Example Link (no target)</a>
 37                </section>
 38            </section>
 39        </article>
 40        <article>
 41            <h3>element[attribute=value] : =</h3>
 42            <section>
 43                <header><h4>CSS</h4></header>
 44<pre class="sample">
 45input[type="text"] {
 46    border: 2px solid green;
 47}
 48</pre>
 49                <header><h4>HTML</h4></header>
 50<pre>
 51&lt;input type="text" placeholder="Enter text here"&gt;
 52&lt;input type="password" placeholder="Password (no border)"&gt;
 53&lt;input type="text" placeholder="Another text input"&gt;
 54</pre>
 55                <header><h4>HTML+CSS</h4></header>
 56                <section class="sample-view">
 57                    <input type="text" placeholder="Enter text here">
 58                    <input type="password" placeholder="Password (no border)">
 59                    <input type="text" placeholder="Another text input">
 60                </section>
 61            </section>
 62        </article>
 63        <article>
 64            <h3>element[attribute^=value] : ^=</h3>
 65            <section>
 66                <header><h4>CSS</h4></header>
 67<pre class="sample">
 68a[href^="https://"] {
 69    font-weight: bold;
 70}
 71</pre>
 72                <header><h4>HTML</h4></header>
 73<pre>
 74&lt;a href="https://example.com"&gt;Secure Link (https)&lt;/a&gt;
 75&lt;a href="http://example.com"&gt;Non-Secure Link (http)&lt;/a&gt;
 76&lt;a href="https://another-example.com"&gt;Another Secure Link (https)&lt;/a&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <a href="https://example.com">Secure Link (https)</a>
 81                    <a href="http://example.com">Non-Secure Link (http)</a>
 82                    <a href="https://another-example.com">Another Secure Link (https)</a>
 83                </section>
 84            </section>
 85        </article>
 86        <article>
 87            <h3>element[attribute$=value] : $=</h3>
 88            <section>
 89                <header><h4>CSS</h4></header>
 90<pre class="sample">
 91img[src$=".jpg"] {
 92    border-radius: 10px;
 93}
 94</pre>
 95                <header><h4>HTML</h4></header>
 96<pre>
 97&lt;img src="image.jpg" alt="JPG Image" width="100"&gt;
 98&lt;img src="pattern.png" alt="PNG Image (no border radius)" width="100"&gt;
 99&lt;img src="example.jpg" alt="Another JPG Image" width="100"&gt;
100</pre>
101                <header><h4>HTML+CSS</h4></header>
102                <section class="sample-view">
103                    <img src="image.jpg" alt="JPG Image" width="100">
104                    <img src="pattern.png" alt="PNG Image (no border radius)" width="100">
105                    <img src="example.jpg" alt="Another JPG Image" width="100">
106                </section>
107            </section>
108        </article>
109        <article>
110            <h3>element[attribute*=value] : *=</h3>
111            <section>
112                <header><h4>CSS</h4></header>
113<pre class="sample">
114p[class*="highlight"] {
115    background-color: yellow;
116}
117</pre>
118                <header><h4>HTML</h4></header>
119<pre>
120&lt;p class="highlight-text"&gt;This paragraph is highlighted.&lt;/p&gt;
121&lt;p class="normal-text"&gt;This paragraph is not highlighted.&lt;/p&gt;
122&lt;p class="text-highlight-important"&gt;This is another highlighted paragraph.&lt;/p&gt;
123</pre>
124                <header><h4>HTML+CSS</h4></header>
125                <section class="sample-view">
126                    <p class="highlight-text">This paragraph is highlighted.</p>
127                    <p class="normal-text">This paragraph is not highlighted.</p>
128                    <p class="text-highlight-important">This is another highlighted paragraph.</p>
129                </section>
130            </section>
131        </article>
132        <article>
133            <h3>element[attribute~=value] : ~=</h3>
134            <section>
135                <header><h4>CSS</h4></header>
136<pre class="sample">
137div[class~="featured"] {
138    border: 1px solid red;
139}
140</pre>
141                <header><h4>HTML</h4></header>
142<pre>
143&lt;div class="featured"&gt;This div is featured.&lt;/div&gt;
144&lt;div class="content featured"&gt;This div is also featured.&lt;/div&gt;
145&lt;div class="content"&gt;This div is not featured.&lt;/div&gt;
146</pre>
147                <header><h4>HTML+CSS</h4></header>
148                <section class="sample-view">
149                    <div class="featured">This div is featured.</div>
150                    <div class="content featured">This div is also featured.</div>
151                    <div class="content">This div is not featured.</div>
152                </section>
153            </section>
154        </article>
155        <article>
156            <h3>element[attribute|=value] : |=</h3>
157            <section>
158                <header><h4>CSS</h4></header>
159<pre class="sample">
160p[lang|="en"] {
161    font-style: italic;
162}
163</pre>
164                <header><h4>HTML</h4></header>
165<pre>
166&lt;p lang="en"&gt;This paragraph is in English.&lt;/p&gt;
167&lt;p lang="en-US"&gt;This paragraph is in American English.&lt;/p&gt;
168&lt;p lang="fr"&gt;Ce paragraphe est en français.&lt;/p&gt;
169</pre>
170                <header><h4>HTML+CSS</h4></header>
171                <section class="sample-view">
172                    <p lang="en">This paragraph is in English.</p>
173                    <p lang="en-US">This paragraph is in American English.</p>
174                    <p lang="fr">Ce paragraphe est en français.</p>
175                </section>
176            </section>
177        </article>
178
179        <article>
180            <h3>CSS Attribute Selector Example : input[required] &amp; input[placeholder]</h3>
181            <section>
182                <header><h4>CSS</h4></header>
183<pre class="sample">
184input[required] {
185    background-color: #ffcccc;
186}
187
188input[placeholder] {
189    font-style: italic;
190    color: #999;
191}
192</pre>
193                <header><h4>HTML</h4></header>
194<pre>
195&lt;input type="text" required placeholder="Enter your name"&gt;
196&lt;input type="email" required placeholder="Enter your email"&gt;
197&lt;input type="text" placeholder="Optional field"&gt;
198</pre>
199                <header><h4>HTML+CSS</h4></header>
200                <section class="sample-view">
201                    <input type="text" required placeholder="Enter your name">
202                    <input type="email" required placeholder="Enter your email">
203                    <input type="text" placeholder="Optional field">
204                </section>
205            </section>
206        </article>
207        <article>
208            <h3>CSS Attribute Selector Example : a[href^="https://"]</h3>
209            <section>
210                <header><h4>CSS</h4></header>
211<pre class="sample">
212a[href^="http://"] {
213    color: orange;
214}
215
216a[href^="https://"] {
217    color: green;
218}
219</pre>
220                <header><h4>HTML</h4></header>
221<pre>
222&lt;a href="http://example.com"&gt;HTTP Link&lt;/a&gt;
223&lt;a href="https://secure.example.com"&gt;HTTPS Link&lt;/a&gt;
224&lt;a href="/relative/path"&gt;Relative Link&lt;/a&gt;
225</pre>
226                <header><h4>HTML+CSS</h4></header>
227                <section class="sample-view">
228                    <a href="http://example.com">HTTP Link</a>
229                    <a href="https://secure.example.com">HTTPS Link</a>
230                    <a href="/relative/path">Relative Link</a>
231                </section>
232            </section>
233        </article>
234        <article>
235            <h3>Attribute Selectors</h3>
236            <section>
237                <header><h4>CSS</h4></header>
238<pre class="sample">
239img[src$=".png"] {
240    border: 2px solid blue;
241}
242
243img[src$=".jpg"] {
244    opacity: 0.5;
245}
246</pre>
247                <header><h4>HTML</h4></header>
248<pre>
249&lt;img src="pattern.png" alt="PNG Image" width="100"&gt;
250&lt;img src="document.jpg" alt="JPEG Image" width="100"&gt;
251</pre>
252                <header><h4>HTML+CSS</h4></header>
253                <section class="sample-view">
254                    <img src="pattern.png" alt="PNG Image" width="100">
255                    <img src="image.jpg" alt="JPEG Image" width="100">
256                </section>
257            </section>
258        </article>
259
260    </main>
261</body>
262</html>

Chi tiết về Bộ chọn Thuộc tính trong CSS

Bộ chọn thuộc tính trong CSS được sử dụng để chọn các phần tử HTML có thuộc tính cụ thể. Điều này cho phép bạn định kiểu cho các phần tử dựa trên giá trị thuộc tính của chúng. Chúng tôi sẽ giải thích từng bước từ cơ bản đến cách sử dụng nâng cao của bộ chọn thuộc tính.

Các loại và cú pháp của Bộ chọn Thuộc tính

Có nhiều loại bộ chọn thuộc tính khác nhau. Ở đây, chúng tôi sẽ xem xét chi tiết từng loại bộ chọn.

Chọn Phần tử với một Thuộc tính 

1a[target] {
2    font-weight: bold;
3}
  • Bằng cách chỉ định tên thuộc tính, bạn có thể chọn tất cả các phần tử có thuộc tính được chỉ định.
  • Trong ví dụ này, tất cả các phần tử <a> với thuộc tính target đều có văn bản được in đậm.

Chọn Phần tử với Giá trị Thuộc tính Cụ thể 

1input[type="text"] {
2  border: 2px solid green;
3}
  • Sử dụng = cho phép bạn chọn các phần tử có giá trị thuộc tính khớp chính xác với một giá trị cụ thể.
  • Trong ví dụ này, tất cả các phần tử <input> có thuộc tính type được đặt là "text" sẽ được áp dụng viền màu xanh lá cây.

Chọn Phần tử với Giá trị Thuộc tính Khớp Một phần

Bạn có thể chỉ định các khớp một phần của giá trị thuộc tính bằng cách sử dụng ba bộ chọn sau đây.

  1. Bắt Đầu Với (^=)
1a[href^="https://"] {
2    font-weight: bold;
3}
  • Chọn các phần tử có giá trị thuộc tính bắt đầu bằng chuỗi được chỉ định.
  • Trong ví dụ này, tất cả các liên kết có thuộc tính href bắt đầu bằng "https://" sẽ được in đậm.
  1. Kết Thúc Với ($=)
1img[src$=".jpg"] {
2    border-radius: 10px;
3}
  • Chọn các phần tử có giá trị thuộc tính kết thúc bằng chuỗi được chỉ định.
  • Trong ví dụ này, các kiểu bo tròn góc được áp dụng cho tất cả các hình ảnh có thuộc tính src kết thúc bằng .jpg.
  1. Chứa (*=)
1p[class*="highlight"] {
2    background-color: yellow;
3}
  • Chọn các phần tử có giá trị thuộc tính chứa chuỗi được chỉ định.
  • Trong ví dụ này, màu nền vàng được áp dụng cho tất cả các phần tử <p> có thuộc tính class chứa "highlight".

Chọn Phần tử có Giá trị Thuộc tính Chứa một Từ Cách Khoảng trắng (~=) 

1div[class~="featured"] {
2  border: 1px solid red;
3}
  • ~= chọn các phần tử nếu giá trị thuộc tính chứa một từ cụ thể trong những từ được phân tách bằng khoảng trắng.
  • Trong ví dụ này, viền màu đỏ được áp dụng cho tất cả các phần tử <div> có thuộc tính class chứa từ "featured".

Chọn các phần tử có giá trị thuộc tính bắt đầu bằng một giá trị tách bằng dấu gạch ngang (|=) 

1p[lang|="en"] {
2  font-style: italic;
3}
  • |= chọn các phần tử nếu giá trị thuộc tính khớp với chuỗi chỉ định hoặc bắt đầu với chuỗi này kèm theo một dấu gạch ngang. Chủ yếu được sử dụng với thuộc tính ngôn ngữ (lang).
  • Trong ví dụ này, chữ in nghiêng được áp dụng cho tất cả các phần tử <p> có thuộc tính lang bắt đầu với "en", chẳng hạn như "en" hoặc "en-US".

Ví dụ thực tế và ứng dụng

Tiếp theo, hãy nhìn vào một số tình huống thực tế.

Định dạng trường nhập liệu mẫu 
1input[required] {
2  background-color: #ffcccc;
3}
4
5input[placeholder] {
6  font-style: italic;
7  color: #999;
8}
  • Trong ví dụ này, màu nền hơi đỏ được áp dụng cho tất cả các trường nhập có thuộc tính required, và văn bản giữ chỗ của các trường nhập có thuộc tính placeholder được định dạng với chữ in nghiêng và màu nhạt.
Định dạng dựa trên giao thức liên kết 
1a[href^="http://"] {
2  color: orange;
3}
4
5a[href^="https://"] {
6  color: green;
7}
  • Ở đây, các liên kết bắt đầu với http:// được đặt thành màu cam, và các liên kết bắt đầu với https:// được đặt thành màu xanh lá cây. Điều này cho phép phân biệt trực quan giữa các liên kết an toàn và không an toàn.
Định dạng dựa trên định dạng hình ảnh 
1img[src$=".png"] {
2  border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6  opacity: 0.5;
7}
  • Trong ví dụ này, viền màu xanh được thêm vào cho các hình ảnh định dạng .png, và độ mờ của các hình ảnh định dạng .jpg được đặt là 50%.

Tóm tắt

Bộ chọn thuộc tính CSS là một cách linh hoạt và mạnh mẽ để chọn phần tử dựa trên các thuộc tính HTML. Sử dụng những bộ chọn này cho phép định dạng cụ thể hơn.

Sử dụng cú pháp cơ bản và các ví dụ áp dụng được giải thích trong bài viết này để dễ dàng đạt được kiểu dáng nâng cao hơn.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Kế thừa trong CSSCác ký tự đặc biệt và các hàm trong CSS