CSS Selectors
ওয়েব ডিজাইনের জগতে CSS (Cascading Style Sheets) হচ্ছে সেই শক্তিশালী টুল, যেটা দিয়ে ওয়েবপেজের ডিজাইন, কালার, ফন্ট, লেআউট সব কিছু পরিবর্তন করা যায়। কিন্তু CSS কাজ করে কীভাবে?
👉 উত্তর হলো Selectors।
CSS Selector ব্যবহার করে আমরা নির্দিষ্ট HTML এলিমেন্টকে খুঁজে বের করে তার জন্য আলাদা আলাদা স্টাইল (style rules) দিতে পারি।
এই ব্লগে আমরা A-Z সব সিলেক্টর একে একে দেখব, যাতে তুমি সহজে বুঝতে পারো কোন পরিস্থিতিতে কোন সিলেক্টর ব্যবহার করা উচিত।
১. Universal Selector (*)
Universal selector সব HTML এলিমেন্টকে একসাথে টার্গেট করে।
* {
margin: 0;
padding: 0;
}
👉 সব এলিমেন্টের margin ও padding রিসেট হয়ে যাবে। এটা সাধারণত CSS Reset এর জন্য ব্যবহার করা হয়।
২. Type Selector (Element Selector)
এই সিলেক্টর HTML ট্যাগ নাম ব্যবহার করে।
p {
color: blue;
}
👉 সব <p> ট্যাগ নীল হবে।
এটা সবচেয়ে সাধারণ সিলেক্টর।
৩. Class Selector (.classname)
কোনো এলিমেন্টকে class attribute দিয়ে টার্গেট করা হয়।
.title {
font-size: 24px;
font-weight: bold;
}
👉 class="title" দেওয়া যেকোনো এলিমেন্টের টেক্সট বড় ও bold হবে।
৪. ID Selector (#idname)
একটা এলিমেন্টের ইউনিক id থাকলে সেটাকে টার্গেট করতে হয় # দিয়ে।
#main {
background: #f4f4f4;
}
👉 শুধু id="main" থাকা এলিমেন্টে ব্যাকগ্রাউন্ড কালার হবে।
⚠️ এক পেজে একই ID বারবার ব্যবহার করা যাবে না।
৫. Grouping Selector (,)
একই স্টাইল একাধিক এলিমেন্টে দিতে হলে কমা ব্যবহার করা হয়।
h1, h2, h3 {
font-family: Arial, sans-serif;
}
👉 সব heading ট্যাগ একই ফন্ট নেবে।
৬. Descendant Selector (Space)
একটি এলিমেন্টের ভেতরের অন্য এলিমেন্টকে টার্গেট করে।
div p {
color: red;
}
👉 সব <div> এর ভেতরের <p> লাল হবে।
৭. Child Selector (>)
শুধু সরাসরি child টার্গেট করে।
div > p {
color: green;
}
👉 div এর ভেতরের সরাসরি <p> এলিমেন্ট সবুজ হবে, nested নয়।
৮. Adjacent Sibling Selector (+)
একটি এলিমেন্টের পরের প্রথম sibling কে টার্গেট করে।
h1 + p {
font-style: italic;
}
👉 h1 এর পরের প্রথম <p> ইটালিক হবে।
৯. General Sibling Selector (~)
একটি এলিমেন্টের পরবর্তী সব sibling কে টার্গেট করে।
h1 ~ p {
color: purple;
}
👉 h1 এর পরবর্তী সব <p> বেগুনি হবে।
১০. Attribute Selector
অ্যাট্রিবিউট অনুযায়ী এলিমেন্ট টার্গেট করতে ব্যবহার করা হয়।
input[type="text"] {
border: 1px solid black;
}
👉 সব টেক্সট ইনপুটে বর্ডার আসবে।
১১. Advanced Attribute Selectors
আরও উন্নতভাবে অ্যাট্রিবিউট টার্গেট করা যায়।
a[target="_blank"] { color: red; } /* নির্দিষ্ট মান */
a[href^="https"] { color: green; } /* শুরুতে https */
a[href$=".pdf"] { color: orange; } /* শেষে .pdf */
a[href*="google"] { color: blue; } /* মধ্যে google */
১২. Pseudo-classes
এগুলো এলিমেন্টের বিশেষ অবস্থায় (state) স্টাইল দেয়।
:hover– মাউস গেলে:focus– ইনপুট ফোকাস হলে:active– ক্লিকের সময়:first-child– প্রথম এলিমেন্ট:last-child– শেষ এলিমেন্ট
a:hover {
color: red;
}
১৩. Pseudo-elements
এগুলো এলিমেন্টের নির্দিষ্ট অংশ টার্গেট করে।
::before– এলিমেন্টের আগে কনটেন্ট::after– এলিমেন্টের পরে কনটেন্ট::first-line– প্রথম লাইন::first-letter– প্রথম অক্ষর
p::first-letter {
font-size: 30px;
color: blue;
}
১৪. Combinators
সিলেক্টরের মধ্যে সম্পর্ক বোঝাতে ব্যবহৃত হয়।
Descendant ( ) →
div pChild (>) →
div > pAdjacent (+) →
h1 + pGeneral (~) →
h1 ~ p
১৫. Nth Selectors
nth-child() বা nth-of-type() ব্যবহার করে নির্দিষ্ট child টার্গেট করা যায়।
li:nth-child(2) {
color: red;
}
👉 দ্বিতীয় <li> লাল হবে।
li:nth-child(odd) { background: #eee; }
li:nth-child(even) { background: #ddd; }
👉 লিস্টে অড-ইভেন আলাদা কালার হবে।
১৬. Not Selector (:not())
যে এলিমেন্ট নির্দিষ্ট শর্ত পূরণ করে না, তাকে টার্গেট করে।
p:not(.highlight) {
color: gray;
}
👉 class="highlight" ছাড়া সব <p> গ্রে হবে।
১৭. Specificity
যখন একাধিক সিলেক্টর একই এলিমেন্টে প্রযোজ্য হয়, তখন কোনটা প্রাধান্য পাবে?
Inline style → সবচেয়ে বেশি
ID selector → বেশি
Class selector → মাঝারি
Type selector → সবচেয়ে কম
১৮. Universal + Attribute + Pseudo একসাথে
আমরা চাইলে সিলেক্টর মিশিয়ে ব্যবহার করতে পারি।
input[type="text"]:focus {
border: 2px solid blue;
}
👉 টেক্সট ইনপুটে ফোকাস করলে নীল বর্ডার আসবে।
CSS Selectors হচ্ছে ওয়েব ডিজাইনের হৃদয়।
Universal থেকে শুরু করে Pseudo-class, Pseudo-element, Attribute Selector, Combinator, Nth-child সবগুলো ভালোভাবে বুঝলে তুমি যেকোনো ওয়েবপেজের স্টাইল ১০০% নিয়ন্ত্রণে রাখতে পারবে।
