รายละเอียดของ Attribute Selectors ใน CSS
บทความนี้อธิบายรายละเอียดเกี่ยวกับตัวเลือกแอตทริบิวต์ใน CSS
คุณสามารถเรียนรู้วิธีเขียนการจับคู่ไปข้างหน้า การจับคู่ถอยหลัง และการจับคู่บางส่วนสำหรับตัวเลือกแอตทริบิวต์
YouTube Video
HTML สำหรับการแสดงตัวอย่าง
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<a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
31<a href="https://example.com">Example Link (no target)</a>
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<input type="text" placeholder="Enter text here">
52<input type="password" placeholder="Password (no border)">
53<input type="text" placeholder="Another text input">
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<a href="https://example.com">Secure Link (https)</a>
75<a href="http://example.com">Non-Secure Link (http)</a>
76<a href="https://another-example.com">Another Secure Link (https)</a>
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<img src="image.jpg" alt="JPG Image" width="100">
98<img src="pattern.png" alt="PNG Image (no border radius)" width="100">
99<img src="example.jpg" alt="Another JPG Image" width="100">
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<p class="highlight-text">This paragraph is highlighted.</p>
121<p class="normal-text">This paragraph is not highlighted.</p>
122<p class="text-highlight-important">This is another highlighted paragraph.</p>
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<div class="featured">This div is featured.</div>
144<div class="content featured">This div is also featured.</div>
145<div class="content">This div is not featured.</div>
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<p lang="en">This paragraph is in English.</p>
167<p lang="en-US">This paragraph is in American English.</p>
168<p lang="fr">Ce paragraphe est en français.</p>
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] & 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<input type="text" required placeholder="Enter your name">
196<input type="email" required placeholder="Enter your email">
197<input type="text" placeholder="Optional field">
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<a href="http://example.com">HTTP Link</a>
223<a href="https://secure.example.com">HTTPS Link</a>
224<a href="/relative/path">Relative Link</a>
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<img src="pattern.png" alt="PNG Image" width="100">
250<img src="document.jpg" alt="JPEG Image" width="100">
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>รายละเอียดของ Attribute Selectors ใน CSS
ตัวเลือกแอตทริบิวต์ของ CSS ใช้เพื่อเลือกองค์ประกอบ HTML ที่มีแอตทริบิวต์เฉพาะ สิ่งนี้ช่วยให้คุณสามารถกำหนดสไตล์ให้กับองค์ประกอบตามค่าของแอตทริบิวต์ได้ เราจะอธิบายทีละขั้นจากพื้นฐานไปจนถึงการใช้งานขั้นสูงของตัวเลือกแอตทริบิวต์
ประเภทและไวยากรณ์ของ Attribute Selectors
มีประเภทของตัวเลือกแอตทริบิวต์ที่หลากหลาย ที่นี่ เราจะศึกษาแต่ละประเภทของตัวเลือกอย่างละเอียด
การเลือกองค์ประกอบที่มีแอตทริบิวต์
1a[target] {
2 font-weight: bold;
3}- โดยระบุชื่อแอตทริบิวต์ คุณสามารถเลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ที่กำหนด
- ในตัวอย่างนี้ องค์ประกอบ
<a>ทั้งหมดที่มีแอตทริบิวต์targetจะมีข้อความเป็นตัวหนา
การเลือกองค์ประกอบที่มีค่าแอตทริบิวต์เฉพาะ
1input[type="text"] {
2 border: 2px solid green;
3}- การใช้
=ช่วยให้คุณสามารถเลือกองค์ประกอบที่มีค่าแอตทริบิวต์ตรงกับค่าที่กำหนดได้อย่างแม่นยำ - ในตัวอย่างนี้ องค์ประกอบ
<input>ที่มีแอตทริบิวต์typeถูกตั้งค่าเป็น"text"จะมีเส้นขอบสีเขียวเพิ่มเข้าไป
การเลือกองค์ประกอบที่มีการจับคู่ค่าแอตทริบิวต์บางส่วน
คุณสามารถระบุค่าที่ตรงบางส่วนของแอตทริบิวต์โดยใช้ตัวเลือกสามแบบต่อไปนี้
- เริ่มต้นด้วย (
^=)
1a[href^="https://"] {
2 font-weight: bold;
3}- เลือกองค์ประกอบที่ค่าของแอตทริบิวต์เริ่มต้นด้วยสตริงที่ระบุไว้
- ในตัวอย่างนี้ ลิงก์ทั้งหมดที่มีแอตทริบิวต์
hrefเริ่มต้นด้วย"https://"จะถูกเน้นตัวหนา
- ลงท้ายด้วย (
$=)
1img[src$=".jpg"] {
2 border-radius: 10px;
3}- เลือกองค์ประกอบที่ค่าของแอตทริบิวต์สิ้นสุดด้วยสตริงที่ระบุ
- ในตัวอย่างนี้ รูปแบบที่ทำให้มุมมนถูกนำไปใช้กับรูปภาพทั้งหมดที่มีแอตทริบิวต์
srcลงท้ายด้วย.jpg
- ประกอบด้วย (
*=)
1p[class*="highlight"] {
2 background-color: yellow;
3}- เลือกองค์ประกอบที่มีค่าของแอตทริบิวต์ประกอบด้วยสตริงที่ระบุ
- ในตัวอย่างนี้ พื้นหลังสีเหลืองถูกนำไปใช้กับองค์ประกอบ
<p>ทั้งหมดที่มีแอตทริบิวต์classประกอบด้วย"highlight"
การเลือกองค์ประกอบที่ค่าแอตทริบิวต์ประกอบด้วยคำที่แยกด้วยช่องว่าง (~=)
1div[class~="featured"] {
2 border: 1px solid red;
3}~=เลือกองค์ประกอบหากค่าของแอตทริบิวต์ประกอบด้วยคำเฉพาะภายในคำที่ถูกแยกด้วยช่องว่าง- ในตัวอย่างนี้ เส้นขอบสีแดงถูกนำไปใช้กับองค์ประกอบ
<div>ทั้งหมดที่แอตทริบิวต์classประกอบด้วยคำว่า"featured"
การเลือกองค์ประกอบที่ค่าของแอตทริบิวต์เริ่มต้นด้วยค่าที่แยกด้วยยติพจน์ (|=)
1p[lang|="en"] {
2 font-style: italic;
3}|=เลือกองค์ประกอบหากค่าของแอตทริบิวต์ตรงกับสตริงที่ระบุหรือเริ่มต้นด้วยสตริงนั้นแล้วตามด้วยขีดกลาง มันถูกใช้เป็นหลักกับแอตทริบิวต์ภาษาที่ชื่อว่าlang- ในตัวอย่างนี้ อักษรเอียงถูกนำไปใช้กับองค์ประกอบ
<p>ทั้งหมดที่แอตทริบิวต์langเริ่มต้นด้วย"en"เช่น"en"หรือ"en-US"
ตัวอย่างและแอปพลิเคชั่นปฏิบัติจริง
ต่อไปเรามาดูสถานการณ์ที่นำไปใช้ได้จริงกัน
การจัดสไตล์ให้กับฟอร์มที่ใส่ข้อมูล
1input[required] {
2 background-color: #ffcccc;
3}
4
5input[placeholder] {
6 font-style: italic;
7 color: #999;
8}- ในตัวอย่างนี้ พื้นหลังสีแดงจะถูกนำไปใช้กับช่องอินพุตทั้งหมดที่มีแอตทริบิวต์
requiredและข้อความ placeholder ของช่องอินพุตที่มีแอตทริบิวต์placeholderจะถูกจัดรูปแบบด้วยอักษรเอียงและสีอ่อน
การจัดสไตล์ตามโปรโตคอลของลิงก์
1a[href^="http://"] {
2 color: orange;
3}
4
5a[href^="https://"] {
6 color: green;
7}- ที่นี่ ลิงก์ที่เริ่มต้นด้วย
http://จะถูกตั้งค่าเป็นสีส้ม และลิงก์ที่เริ่มต้นด้วยhttps://จะถูกตั้งค่าเป็นสีเขียว สิ่งนี้ทำให้เกิดการแยกแยะทางสายตาระหว่างลิงก์ที่ปลอดภัยและไม่ปลอดภัย
การจัดสไตล์ตามรูปแบบของภาพ
1img[src$=".png"] {
2 border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6 opacity: 0.5;
7}- ในตัวอย่างนี้ เส้นขอบสีน้ำเงินจะถูกเพิ่มไปที่รูปภาพในรูปแบบ
.pngและความทึบของรูปภาพในรูปแบบ.jpgจะถูกตั้งค่าไว้ที่ 50%
สรุป
ตัวเลือกแอตทริบิวต์ CSS เป็นวิธีที่ยืดหยุ่นและทรงพลังในการเลือกองค์ประกอบตามแอตทริบิวต์ของ HTML การใช้ตัวเลือกเหล่านี้จะช่วยให้สามารถจัดรูปแบบได้เจาะจงมากขึ้น
ใช้ไวยากรณ์พื้นฐานและตัวอย่างที่ใช้งานได้ที่อธิบายในบทความนี้ เพื่อให้สามารถบรรลุรูปแบบขั้นสูงได้ง่ายขึ้น
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย