🗃️ CSS Selectors - নতুন, পুরাতন এবং অন্যান্য

[tanim_mahbub]

~ + ^ $ | >

উপরের এই চিহ্নগুলোর সাথে পুরোনো ডেভেলপাররা কমবেশি পরিচিত হলেও, নতুন হিসেবে আমার কাছে এগুলো ছিল এলিয়েন সাইন (we are not alone ) (ব্যাকগ্রাউন্ড মিউজিক)। আমি গুগল করতাম এভাবে- What is this symble in CSS? আর কাউকে জিজ্ঞেস করার সময় বলতাম- এইগুলা কী?

CSS Selector এর আরেকটা ঝামেলার জায়গা হলো- pseudo selectors, pseudo elements, pseudo classes মানে, কোনটা কী?

::before ::after স্যুডো সিলেক্টর নাকি ক্লাস, নাকি বাইসাইকেল?
:hover :focus এগুলা কি স্যুডো এলিমেন্ট নাকি ক্লাস, নাকি মাস্টারমাইন্ড?

আসেন আজকে আলোচনার মাধ্যমে এই বিষয়গুলার সমাধান করি। প্রতিটার সুনির্দিষ্ট নাম, কাজ, এবং সম্ভব হলে CSS এর কোন ভার্সনের অন্তর্ভুক্ত, এই বিষয়গুলোও জানব। তবে শুরু করার আগে আরেকটা বিষয় বলে নেয়া ভাল।

আজকে শুধু CSS Selector এর নাম এবং শ্রেণীবিন্যাস তথা ক্লাসিফিক্যাশান নিয়ে আমাদের মধ্যে যে একটা ধোঁয়াশা আছে, সেটা ক্লিয়ার করার চেষ্টা করবো। সব সিলেক্টর নিয়ে আলাদা আলাদা আলোচনা করতে গেলে সিলেক্টরপিডিয়া হয়ে যাবে, এবং সত্যি বলতে কি, আলাদা আলোচনার প্রয়োজনও নাই। টেবিল আকারে নাম, ভার্সন, কাজ এবং ছোট্ট একটা উদাহরণ, এইটুকুই অনেক।

[১] ইংরেজি pseudo শব্দের বাংলা অনেকটা এইরকম- কৃত্রিম, ছদ্ম ইত্যাদি। অর্থাৎ, Pseudo Selector আসলে কোন স্বতন্ত্র সিলেক্টর না, এর নিজস্ব কোন সত্তা নাই। সে কৃত্রিম পদ্ধতিতে
অন্য একটা সিলেক্টরের ছদ্মবেশে তার কাজ করে।

কোনটা কী?

• ::before ::after এর মত যারা আছে, যেমন, ‌‌::selection ::marker ::first-line ::first-letter ::placeholder ::backdrop ইত্যাদি, এগুলোকে বলা হয়- ‌‌Pseudo Element (স্যুডো এলিমেন্ট)।
  • এরা ডবল কোলন :: দিয়ে শুরু হয়। তবে কিছু ব্রাউজারের পুরোনো ভার্সনগুলোতে আগের সিঙ্গেল কোলন : দিয়েও কাজ করে। এদের কাজ হলো এলিমেন্ট নিয়ে। এলিমেন্টের আগে/পরে (::before ::after) কিছু করা, এলিমেন্টের প্রথম লাইন (::first-line) বা (::first-letter), ইত্যাদি নিয়ে কাজ করা, মোটকথা এলিমেন্ট-কেন্দ্রিক কাজকর্ম সব।
• :hover :focus এর মত যারা আছে, যেমন, :visited :first-child :nth-child() :checked :target :has() :is() :where() ইত্যাদি, এগুলোকে বলা হয়- Pseudo Class (স্যুডো ক্লাস)।
  • এরা শুরু হয় সিঙ্গেল কোলন দিয়ে। এদের কাজ হলো এলিমেন্টের অবস্থার (State) উপর ভিত্তি করে কাজ করা, যেমন- :hover :focus :target :checked ইত্যাদি, অথবা ভিন্ন আরেকটি এলিমেন্টকে সিলেক্ট করা- :has() :is() :where() ইত্যাদি।
• আর এই দুই ধরনের সিলেক্টরকে Pseudo Selector বলে।

কিছু কমন Pseudo Selector নিচে টেবিল আকারে দেয়া হলো, ভার্সন এবং সংক্ষিপ্ত পরিচিতিসহ। এগুলো ছাড়া আরও অনেক আছে, সার্চ করলেই পাবেন।

---

CSS Pseudo Elements

---

Pseudo Elements	Version	Short Definition & Example
::first-line	CSS1	Styles the first line of a block-level element. Example: p::first-line { color: blue; }
::first-letter	CSS1	Styles the first letter of a block-level element. Example: p::first-letter { font-size: 2em; }
::before	CSS2	Inserts content before an element’s content. Example: p::before { content: "Note: "; }
::after	CSS2	Inserts content after an element’s content. Example: p::after { content: " End."; }
::selection	CSS3	Styles the portion of text highlighted by the user. Example: ::selection { background: yellow; }
::placeholder	CSS3	Styles the placeholder text of an input field. Example: input::placeholder { color: grey; }
::marker	CSS3	Styles the bullet or numbering of list items. Example: li::marker { color: red; }
::backdrop	CSS4	Styles the backdrop of an element in fullscreen mode. Example: ::backdrop { background: black; }
::file-selector-button	CSS4	Styles the button in <input type="file">. Example: input::file-selector-button { color: blue; }

---

CSS Pseudo Classes

---

Pseudo Classes	Version	Short Definition & Example
:link	CSS1	Styles unvisited links. Example: a:link { color: blue; }
:visited	CSS1	Styles visited links. Example: a:visited { color: purple; }
:hover	CSS2	Styles elements when the mouse hovers over them. Example: a:hover { color: red; }
:focus	CSS2	Styles elements when they are focused. Example: input:focus { border-color: green; }
:first-child	CSS2	Targets the first child element of its parent. Example: p:first-child { font-weight: bold; }
:nth-child()	CSS3	Matches elements based on their position among siblings. Example: p:nth-child(2) { color: blue; }
:nth-of-type()	CSS3	Matches elements based on their type and position. Example: p:nth-of-type(2) { color: red; }
:not()	CSS3	Excludes elements that match the given selector. Example: p:not(.highlight) { color: grey; }
:enabled	CSS3	Styles form elements that are enabled. Example: input:enabled { background: white; }
:disabled	CSS3	Styles form elements that are disabled. Example: input:disabled { background: grey; }
:checked	CSS3	Styles elements that are checked (like checkboxes or radio buttons). Example: input:checked { background: yellow; }
:target	CSS3	Styles elements that are the target of a URL fragment. Example: #section:target { background: yellow; }
:has()	CSS4	Matches elements that contain specific child elements. Example: div:has(img) { border: 1px solid red; }
:is()	CSS4	Matches elements that fit any of the selectors in the argument list. Example: p:is(.class1, .class2) { color: blue; }
:where()	CSS4	Similar to :is() but with zero specificity. Example: :where(h1, h2) { margin: 0; }

Combinator এবং Attribute selector

[২] শুরুতে যে চিহ্নগুলোর কথা বলেছিলাম, সেগুলোও দুই ভাগে বিভক্ত- Combinator এবং Attribute selector। এগুলো মোটামুটি পুরোনো, প্রায় সবাই জানি। আর এই Attribute selector কে $ ^ ~ * ইত্যাদি চিহ্নগুলো আরও শক্তিশালী করে। পুরোনো হলেও অনেকে এগুলোর নাম সম্পর্কে একটু কনফিউশনে থাকেন। নিচের টেবিলে কিছু কমন Combinator এবং Attribute selector দেয়া হলো, নাম, ভার্সন ও সংক্ষিপ্ত পরিচিতিসহ।

---

Selector	Name	Version	Description & Example
+	Adjacent Sibling Selector	CSS2	Selects the first sibling element immediately following another element. Example: ul + p { color: blue; }
~	General Sibling Selector	CSS2	Selects all sibling elements that follow another element, not necessarily adjacent. Example: ul ~ table { border: 1px solid black; }
[attribute]	Attribute Selector	CSS1	Selects all elements that have a specific attribute, regardless of its value. Example: [class] { color: red; }
[attribute=my-Address]	Exact Attribute Value Selector	CSS2	Selects elements whose specific attribute exactly matches the value “my-Address”. Example: [class=my-Address] { color: green; }
[attribute$=ess]	Ends With Attribute Selector	CSS2	Selects elements whose attribute ends with a specific string. Example: [class$=ess] { color: blue; }
[class|=my]	Hyphen-Separated Attribute Selector	CSS2	Selects elements whose attribute is either exactly “my” or starts with “my-”, such as “my-address”. Example: [class|=my] { color: purple; }
[class^=L]	Starts With Attribute Selector	CSS2	Selects elements whose attribute starts with the specific value “L”. Example: [class^=L] { color: orange; }
[class~=beautiful]	Contains Word Attribute Selector	CSS2	Selects elements whose attribute contains a specific word (space-separated). Example: [class~=beautiful] { color: pink; }
[class*=s]	Contains Substring Attribute Selector	CSS3	Selects elements whose attribute contains a specific substring anywhere in the value. Example: [class*=s] { color: teal; }

আজকে এ পর্যন্তই, সবাই ভাল থাকবেন, আল্লাহ হাফেজ

[ArafatDinajpur]

@RaheelArfeen Take a look here. Very important topic for you.

[Tariqul_Islam]

@tanim_mahbub

[class*=s] Contains Substring Attribute Selector CSS3 Selects elements whose attribute contains a specific substring anywhere in the value.
Example:
[class*=s] { color: teal; }

এর উদাহারণ:
HTML

<div class="sample">This is a sample text.</div>
<div class="test">This is a test text.</div>
<div class="example">This is an example text.</div>
 <div class="demo">This text won't be affected.</div>

CSS

[class*="s"] {
    color: teal;
}

এই উদাহরণে, <div> এলিমেন্টগুলো যেগুলোর ক্লাস sample, test, এগুলো সবগুলোতেই “s” অক্ষরটি আছে, তাই এগুলোর টেক্সটের রঙ teal সেট হবে।

demo,‘example’ এলিমেন্টটি প্রভাবিত হবে না, কারণ এর ক্লাসে “s” নেই।

[tanim_mahbub]

জ্বী ভাই, এটা টেবিলে দেখানো সিলেক্টরগুলোর মধ্যে সবার শেষে আছে। HTML/CSS এর উদাহরণসহ দেখানোর জন্য ধন্যবাদ

[tamimwahid]

অনেক অনেক ধন্যবাদ। বিস্তারিত জানতে পারলাম।

[Muslim201]

Onek sundor… Thanks vlo kisu show korar jonno

[Md_badhon]

CSS Pseudo Elements share korar jonno thanks