CSSBeginner
CSS Selectors (সিলেক্টর)
Class, id, element, attribute, pseudo-class ও combinator সহ CSS selector-এর সম্পূর্ণ বাংলা গাইড।
17টি অংশবাংলা ভাষায়
Selector হলো CSS-এর সেই অংশ যা নির্ধারণ করে কোন element-এ স্টাইল প্রযোজ্য হবে। সঠিক selector ব্যবহার মানেই কোডের অর্ধেক সমাধান।
মৌলিক selector
Element selector
p { color: dimgray; } /* সব <p> */
h1 { font-weight: bold; } /* সব <h1> */Class selector (.)
.btn { padding: 10px 20px; }
/* HTML: <button class="btn"> */ID selector (#)
#header { position: fixed; }
/* HTML: <header id="header"> */Attribute selector
input[type="email"] { border-color: blue; }
a[target="_blank"]::after { content: " ↗"; }Pseudo-class
:hover— মাউস রাখলে:focus— ফোকাস করলে:first-child— প্রথম সন্তান:nth-child(2)— ক্রমিক অনুযায়ী:not(selector)— বাদ দিয়ে
a:hover { color: green; }
li:first-child { font-weight: bold; }Combinator
| প্রতীক | নাম | অর্থ |
|---|---|---|
| A B | descendant | A-এর ভেতরের সব B |
| A > B | child | A-এর সরাসরি সন্তান B |
| A + B | adjacent sibling | A-র ঠিক পরের B |
| A ~ B | general sibling | A-র পরে থাকা B |
nav > ul { /* nav-এর সরাসরি ul */
display: flex;
}
h2 + p { /* h2-এর ঠিক পরের p */
margin-top: 0;
}specificity মাথায় রাখুন
ID-এর Specificity সবচেয়ে বেশি, তারপর class, তারপর element। বেশি নির্দিষ্ট selector দিয়ে সাধারণ selector-কে আবৃত করা কঠিন — তাই সহজ selector দিয়ে শুরু করুন।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।