Articles
מבוא ל-CSS
פרטים על בוררי מאפיינים ב-CSS

פרטים על בוררי מאפיינים ב-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&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>

פרטים על בוררי מאפיינים ב-CSS

בוררי מאפיינים ב-CSS משמשים לבחירת אלמנטים ב-HTML שיש להם מאפיינים ספציפיים. דבר זה מאפשר לעצב אלמנטים בהתבסס על ערכי המאפיינים שלהם. נסביר כעת שלב אחר שלב מהבסיס ועד לשימוש מתקדם בבוררי מאפיינים.

סוגים וסינטקס של בוררי מאפיינים

קיימים סוגים שונים של בוררי מאפיינים. כאן נבחן לעומק כל סוג של בורר.

בחירת אלמנטים עם מאפיין 

1a[target] {
2    font-weight: bold;
3}
  • על ידי ציון שם התכונה, ניתן לבחור את כל האלמנטים שיש להם את התכונה שצוינה.
  • בדוגמה זו, כל רכיבי <a> עם המאפיין target הטקסט שלהם מודגש.

בחירת אלמנטים עם ערך מאפיין ספציפי 

1input[type="text"] {
2  border: 2px solid green;
3}
  • שימוש ב-= מאפשר לבחור אלמנטים שערך התכונה שלהם תואם בדיוק לערך מסוים.
  • בדוגמה זו, כל אלמנט <input> שבו המאפיין type מוגדר ל-"text" יקבל גבול ירוק.

בחירת אלמנטים עם התאמה חלקית לערך המאפיין

ניתן לציין התאמות חלקיות לערכי מאפיינים באמצעות שלושת הבוררים הבאים.

  1. מתחיל עם (^=)
1a[href^="https://"] {
2    font-weight: bold;
3}
  • בוחר אלמנטים שבהם ערך המאפיין מתחיל במחרוזת המציינת.
  • בדוגמה זו, כל הקישורים שבהם המאפיין href מתחיל ב-"https://" יקבלו עיצוב מודגש.
  1. מסתיים עם ($=)
1img[src$=".jpg"] {
2    border-radius: 10px;
3}
  • בוחר אלמנטים שהערך של המאפיין שלהם מסתיים במחרוזת שצוינה.
  • בדוגמה זו, סגנונות שעיגלו את הפינות מוחלים על כל התמונות בעלות מאפיין src שמסתיים ב-.jpg.
  1. מכיל (*=)
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 Video

ירושה ב-CSSתווים מיוחדים ופונקציות ב-CSS