تفاصيل منتقيات الخصائص في 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>تفاصيل منتقيات الخصائص في CSS
تُستخدم محددات السمات في CSS لاختيار عناصر HTML التي تحتوي على سمات محددة۔ يتيح لك ذلك تنسيق العناصر استنادًا إلى قيم سماتها۔ سنشرح الآن خطوة بخطوة من الأساسيات إلى الاستخدام المتقدم لمحددات السمات۔
أنواع وصياغة منتقيات الخصائص
هناك أنواع مختلفة من محددات السمات۔ هنا، سنلقي نظرة مفصلة على كل نوع من أنواع المحددات۔
اختيار العناصر باستخدام خاصية
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بخط مائل ولون باهت.۔
التنسيق بناءً على بروتوكولات الروابط
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 أيضًا.۔