Articles
Panimula sa CSS
Mga Detalye ng mga Attribute Selector sa CSS

Mga Detalye ng mga Attribute Selector sa CSS

Ipinaliwanag ng artikulong ito ang mga detalye ng mga selector ng katangian sa CSS.

Maaari mong matutunan kung paano magsulat ng pasulong na pagtutugma, paatras na pagtutugma, at bahagyang pagtutugma para sa attribute selectors.

YouTube Video

HTML para sa Preview

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>

Mga Detalye ng mga Attribute Selector sa CSS

Ang mga selector ng katangian sa CSS ay ginagamit upang piliin ang mga HTML na elemento na may tiyak na mga katangian. Ito ay nagbibigay-daan sa iyo na i-style ang mga elemento batay sa kanilang mga halaga ng katangian. Ipapaliwanag namin ngayon nang hakbang-hakbang mula sa mga pangunahing kaalaman hanggang sa mas advanced na paggamit ng mga selector ng katangian.

Mga Uri at Sintaks ng mga Attribute Selector

May iba't ibang uri ng mga selector ng katangian. Dito, tatalakayin natin nang detalyado ang bawat uri ng selector.

Pagpili ng mga Elemento na may Attribute 

1a[target] {
2    font-weight: bold;
3}
  • Sa pamamagitan ng pagtukoy ng pangalan ng katangian, maaari mong piliin ang lahat ng elemento na may tinukoy na katangian.
  • Sa halimbawa na ito, ang lahat ng <a> na elemento na may target na katangian ay nagiging naka-bold ang kanilang teksto.

Pagpili ng mga Elemento na may Tiyak na Halaga ng Attribute 

1input[type="text"] {
2  border: 2px solid green;
3}
  • Ang paggamit ng = ay nagbibigay-daan sa iyo upang pumili ng mga elemento na ang halaga ng katangian ay eksaktong tumutugma sa isang tiyak na halaga.
  • Sa halimbawang ito, ang lahat ng <input> na elemento na may katangian na type na itinakda sa "text" ay magkakaroon ng berdeng gilid.

Pagpili ng mga Elemento na may Bahagyang Tugma sa Halaga ng Attribute

Maaari mong tukuyin ang bahagyang pagtutugma ng mga halaga ng katangian gamit ang sumusunod na tatlong selector.

  1. Nagsisimula sa (^=)
1a[href^="https://"] {
2    font-weight: bold;
3}
  • Pinipili ang mga elemento kung saan ang halaga ng katangian ay nagsisimula sa tinukoy na string.
  • Sa halimbawang ito, ang lahat ng link na may katangian na href na nagsisimula sa "https://" ay magiging naka-bold.
  1. Nagtatapos sa ($=)
1img[src$=".jpg"] {
2    border-radius: 10px;
3}
  • Pumipili ng mga elemento kung saan ang halaga ng katangian ay nagtatapos sa tinukoy na string.
  • Sa halimbawang ito, ang mga estilo na nagpapabilog sa mga sulok ay inilalapat sa lahat ng mga larawan na may src na attribute na nagtatapos sa .jpg.
  1. *Naglalaman ng (*=)
1p[class*="highlight"] {
2    background-color: yellow;
3}
  • Pinipili ang mga elemento na ang halaga ng attribute ay naglalaman ng tinukoy na string.
  • Sa halimbawang ito, isang dilaw na kulay ng background ay inilalapat sa lahat ng <p> na elemento na ang class na attribute ay naglalaman ng "highlight".

Pagpili ng mga Elemento kung Saan ang Halaga ng Attribute ay Naglalaman ng Space-Separated na Salita (~=) 

1div[class~="featured"] {
2  border: 1px solid red;
3}
  • Ang ~= ay pumipili ng mga elemento kung ang halaga ng attribute ay naglalaman ng isang tiyak na salita sa loob ng mga salitang pinaghihiwalay ng whitespace.
  • Sa halimbawang ito, isang pulang border ay inilalapat sa lahat ng <div> na elemento na ang class na attribute ay naglalaman ng salitang "featured".

Pagpili ng mga Elemento Kung Saan Ang Halaga ng Katangian ay Nagsisimula sa isang Hyphen-Hiwalay na Halaga (|=) 

1p[lang|="en"] {
2  font-style: italic;
3}
  • Ang |= ay pumipili ng mga elemento kung ang halaga ng attribute ay tumutugma sa tinukoy na string o nagsisimula dito na sinusundan ng gitling. Ito ay pangunahing ginagamit sa language na attribute (lang).
  • Sa halimbawang ito, ang italics ay inilalapat sa lahat ng <p> na elemento na ang lang na attribute ay nagsisimula sa "en", gaya ng "en" o "en-US".

Praktikal na mga Halimbawa at Aplikasyon

Sunod, tingnan natin ang ilang praktikal na mga sitwasyon.

Pag-istilo ng Mga Field ng Input ng Form 
1input[required] {
2  background-color: #ffcccc;
3}
4
5input[placeholder] {
6  font-style: italic;
7  color: #999;
8}
  • Sa halimbawang ito, isang mapulang kulay ng background ay inilalapat sa lahat ng input fields na may required na attribute, at ang placeholder na teksto ng input fields na may placeholder na attribute ay dinisenyo ng italics at mapusyaw na kulay.
Pag-istilo Batay sa Mga Protokol ng Link 
1a[href^="http://"] {
2  color: orange;
3}
4
5a[href^="https://"] {
6  color: green;
7}
  • Dito, ang mga link na nagsisimula sa http:// ay naka-set sa kulay kahel, at ang mga link na nagsisimula sa https:// ay naka-set sa kulay berde. Ito ay nagmumungkahi ng pagkakaibang biswal sa pagitan ng mga secure at hindi secure na mga link.
Pag-istilo Batay sa Mga Format ng Larawan 
1img[src$=".png"] {
2  border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6  opacity: 0.5;
7}
  • Sa halimbawang ito, isang asul na border ay idinadagdag sa mga larawan sa format na .png, at ang opacity ng mga larawan sa format na .jpg ay naka-set sa 50%.

Buod

Ang mga CSS attribute selector ay isang fleksible at makapangyarihang paraan para pumili ng mga elemento base sa mga HTML na attribute. Ang paggamit ng mga selector na ito ay nagpapahintulot ng mas tiyak na pag-istilo.

Gamitin ang pangunahing syntax at mga halimbawa na ipinapaliwanag sa artikulong ito upang madaling makamit ang mas advanced na styling.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Pamana sa CSSMga Espesyal na Karakter at Mga Pag-andar sa CSS