বৈশিষ্ট্য নির্বাচকদের বিবরণ 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}- উপাদানগুলি নির্বাচন করে যাদের গুণমানের মান নির্দিষ্ট স্ট্রিং দিয়ে শেষ হয়।
- এই উদাহরণে, .jpg দিয়ে শেষ হওয়া
srcঅ্যাট্রিবিউটগুলোর সাথে থাকা সকল ছবিতে কর্নারগুলিকে রাউন্ড করার স্টাইল প্রয়োগ করা হয়েছে।
- অন্তর্ভুক্ত (
*=)
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ফরম্যাটের ছবিগুলির অপরাপসিটি ৫০% নির্ধারণ করা হয়েছে।
সারসংক্ষেপ
CSS অ্যাট্রিবিউট সিলেক্টরগুলি HTML অ্যাট্রিবিউটের উপর ভিত্তি করে এলিমেন্ট বাছাইয়ের জন্য একটি নমনীয় ও শক্তিশালী পদ্ধতি। এই সিলেক্টরগুলো ব্যবহার করলে আরও নির্দিষ্ট স্টাইলিং করা সম্ভব।
এই প্রবন্ধে ব্যাখ্যা করা মৌলিক ষ্ট্যান্ট্যাক্স এবং প্রয়োগকৃত উদাহরণগুলি ব্যবহার করে সহজেই আরও উন্নত স্টাইলিং অর্জন করুন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।