সিএসএস পডকাস্ট - 015: সিউডো-ক্লাস
বলুন আপনি একটি ইমেল সাইন আপ ফর্ম পেয়েছেন, এবং আপনি চান যে ইমেল ফর্ম ফিল্ডে একটি লাল বর্ডার থাকবে যদি এটি একটি অবৈধ ইমেল ঠিকানা থাকে৷ আপনি এটা কিভাবে করবেন? আপনি একটি :invalid CSS সিউডো-ক্লাস ব্যবহার করতে পারেন, যা অনেক ব্রাউজার-প্রদত্ত ছদ্ম-শ্রেণীর মধ্যে একটি।
একটি ছদ্ম-শ্রেণী আপনাকে রাষ্ট্র পরিবর্তন এবং বাহ্যিক কারণের উপর ভিত্তি করে শৈলী প্রয়োগ করতে দেয়। এর মানে হল যে আপনার ডিজাইন ব্যবহারকারীর ইনপুট যেমন একটি অবৈধ ইমেল ঠিকানায় প্রতিক্রিয়া জানাতে পারে। এগুলি নির্বাচক মডিউলে আচ্ছাদিত, এবং এই মডিউলটি আপনাকে আরও বিশদে নিয়ে যাবে।
ছদ্ম-উপাদানগুলির বিপরীতে, যেগুলি সম্পর্কে আপনি পূর্ববর্তী মডিউলে আরও শিখতে পারেন, ছদ্ম- শ্রেণীগুলি সেই উপাদানটির সাধারণভাবে স্টাইল অংশগুলির পরিবর্তে একটি নির্দিষ্ট অবস্থার মধ্যে থাকতে পারে।
ইন্টারেক্টিভ রাষ্ট্র
আপনার পৃষ্ঠার সাথে একজন ব্যবহারকারীর ইন্টারঅ্যাকশনের কারণে নিম্নলিখিত ছদ্ম-শ্রেণীগুলি প্রযোজ্য।
:hover
যদি একজন ব্যবহারকারীর কাছে মাউস বা ট্র্যাকপ্যাডের মতো একটি পয়েন্টিং ডিভাইস থাকে এবং তারা এটিকে একটি উপাদানের উপর রাখে, তাহলে আপনি শৈলী প্রয়োগ করতে :hover দিয়ে সেই অবস্থায় হুক করতে পারেন। এটি ইঙ্গিত দেওয়ার একটি কার্যকর উপায় যে একটি উপাদানের সাথে ইন্টারঅ্যাক্ট করা যেতে পারে।
:active
এই অবস্থাটি ট্রিগার হয় যখন একটি উপাদানের সাথে সক্রিয়ভাবে ইন্টারঅ্যাক্ট করা হয়—যেমন একটি ক্লিক—ক্লিক প্রকাশের আগে। যদি একটি মাউসের মতো একটি নির্দেশক যন্ত্র ব্যবহার করা হয়, এই অবস্থা তখন যখন ক্লিক শুরু হয় এবং এখনও প্রকাশিত হয়নি।
:focus , :focus-within , এবং :focus-visible
যদি একটি উপাদান ফোকাস গ্রহণ করতে পারে - যেমন একটি <button> - তাহলে আপনি :focus সিউডো-ক্লাসের সাথে সেই অবস্থায় প্রতিক্রিয়া জানাতে পারেন।
আপনার উপাদানের একটি শিশু উপাদান যদি :focus-within দিয়ে ফোকাস পায় তাহলেও আপনি প্রতিক্রিয়া জানাতে পারেন।
ফোকাসযোগ্য উপাদান, বোতামগুলির মতো, ফোকাস রিং দেখাবে যখন সেগুলি ফোকাসে থাকে—এমনকি ক্লিক করার পরেও৷ এই ধরণের পরিস্থিতিতে, একজন বিকাশকারী নিম্নলিখিত CSS প্রয়োগ করবে:
button:focus {
outline: none;
}
এই CSS ডিফল্ট ব্রাউজার ফোকাস রিং সরিয়ে দেয় যখন একটি উপাদান ফোকাস পায়, যা ব্যবহারকারীদের জন্য একটি অ্যাক্সেসিবিলিটি সমস্যা উপস্থাপন করে যারা একটি কীবোর্ড দিয়ে একটি ওয়েব পৃষ্ঠা নেভিগেট করে। যদি কোন ফোকাস শৈলী না থাকে, তাহলে ট্যাব কী ব্যবহার করার সময় তারা বর্তমানে কোথায় ফোকাস আছে তার ট্র্যাক রাখতে সক্ষম হবে না। :focus-visible এর মাধ্যমে আপনি একটি ফোকাস শৈলী উপস্থাপন করতে পারেন যখন একটি উপাদান কীবোর্ড ব্যবহার করে ফোকাস গ্রহণ করে, পাশাপাশি outline: none ।
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
:target pseudo-class এমন একটি উপাদান নির্বাচন করে যার একটি URL খণ্ডের সাথে মিলে যাওয়া একটি id রয়েছে৷ বলুন আপনার কাছে নিম্নলিখিত HTML আছে:
<article id="content">
<!-- ... -->
</article>
URL-এ #content থাকলে আপনি সেই উপাদানটির সাথে শৈলী সংযুক্ত করতে পারেন।
#content:target {
background: yellow;
}
এটি বিশেষভাবে লিঙ্ক করা হয়েছে এমন এলাকাগুলি হাইলাইট করার জন্য দরকারী, যেমন একটি ওয়েবসাইটের প্রধান বিষয়বস্তু, একটি স্কিপ লিঙ্ক ব্যবহার করে৷
ঐতিহাসিক রাষ্ট্র
:link
:link pseudo-class যেকোন <a> উপাদানে প্রয়োগ করা যেতে পারে যার একটি href মান রয়েছে যা এখনও পরিদর্শন করা হয়নি ।
:visited
আপনি একটি লিঙ্ক স্টাইল করতে পারেন যা ব্যবহারকারীরা ইতিমধ্যেই পরিদর্শন করেছেন :visited pseudo-class ব্যবহার করে। এটি :link এর বিপরীত অবস্থা কিন্তু নিরাপত্তার কারণে ব্যবহার করার জন্য আপনার কাছে কম CSS বৈশিষ্ট্য রয়েছে। আপনি শুধুমাত্র color , background-color , border-color , outline-color এবং SVG fill এবং stroke রঙ স্টাইল করতে পারেন।
অর্ডার বিষয়
যদি আপনি একটি :visited শৈলী সংজ্ঞায়িত করেন, তবে এটি অন্তত সমান নির্দিষ্টতার সাথে একটি লিঙ্ক সিউডো-ক্লাস দ্বারা ওভাররাইড করা যেতে পারে। এই কারণে, এটি সুপারিশ করা হচ্ছে যে আপনি একটি নির্দিষ্ট ক্রমে ছদ্ম-শ্রেণীর সাথে লিঙ্কগুলিকে স্টাইলিং করার জন্য LVHA নিয়মটি ব্যবহার করুন: :link , :visited , :hover , :active ।
a:link {}
a:visited {}
a:hover {}
a:active {}
ফর্ম রাজ্য
নিম্নলিখিত ছদ্ম-শ্রেণীগুলি ফর্ম উপাদানগুলি নির্বাচন করতে পারে, বিভিন্ন রাজ্যে এই উপাদানগুলি তাদের সাথে মিথস্ক্রিয়া করার সময় থাকতে পারে।
:disabled এবং :enabled
যদি একটি ফর্ম উপাদান, যেমন একটি <button> ব্রাউজার দ্বারা নিষ্ক্রিয় করা হয়, তাহলে আপনি :disabled pseudo-class দিয়ে সেই অবস্থার সাথে যুক্ত হতে পারেন। :enabled ছদ্ম-শ্রেণি বিপরীত অবস্থার জন্য উপলব্ধ, যদিও ফর্ম উপাদানগুলিও ডিফল্টরূপে :enabled থাকে, তাই আপনি এই ছদ্ম-শ্রেণীর জন্য পৌঁছানোর জন্য নিজেকে খুঁজে পাবেন না।
:checked এবং :indeterminate
একটি সমর্থনকারী ফর্ম উপাদান, যেমন একটি চেকবক্স বা রেডিও বোতাম চেক করা অবস্থায় থাকলে :checked ছদ্ম-শ্রেণি পাওয়া যায়।
:checked স্টেট হল একটি বাইনারি (সত্য বা মিথ্যা) অবস্থা, কিন্তু চেকবক্সের মধ্যে একটি ইন-বিটুইন স্টেট থাকে যখন সেগুলি চেক করা বা আনচেক করা হয় না। এটিকে বলা হয় :indeterminate অবস্থা।
এই অবস্থার একটি উদাহরণ হল যখন আপনার একটি "সব নির্বাচন করুন" নিয়ন্ত্রণ থাকে যা একটি গ্রুপের সমস্ত চেকবক্স চেক করে। ব্যবহারকারী যদি এই চেকবক্সগুলির মধ্যে একটি সাফ করতে চান, তাহলে রুট চেকবক্সটি আর "সমস্ত" চেক করা প্রতিনিধিত্ব করবে না, তাই একটি অনির্দিষ্ট অবস্থায় রাখা উচিত।
<progress> উপাদানটিরও একটি অনির্দিষ্ট অবস্থা রয়েছে যা স্টাইল করা যেতে পারে। একটি সাধারণ ব্যবহারের ক্ষেত্রে এটিকে একটি ডোরাকাটা চেহারা দেওয়া হয় যাতে আরও কতটা প্রয়োজন তা অজানা।
:placeholder-shown
যদি একটি ফর্ম ক্ষেত্রের একটি placeholder বৈশিষ্ট্য থাকে এবং কোনো মান না থাকে , তাহলে :placeholder-shown ছদ্ম-শ্রেণীটি সেই অবস্থায় শৈলী সংযুক্ত করতে ব্যবহার করা যেতে পারে। যত তাড়াতাড়ি ক্ষেত্র বিষয়বস্তু আছে, এটি একটি placeholder আছে কি না, এই রাষ্ট্র আর প্রযোজ্য হবে না.
বৈধতা রাষ্ট্র
আপনি ছদ্ম-শ্রেণি যেমন :valid , :invalid এবং :in-range দিয়ে HTML ফর্ম যাচাইকরণে সাড়া দিতে পারেন। :valid এবং :invalid ছদ্ম-শ্রেণিগুলি প্রসঙ্গগুলির জন্য দরকারী যেমন একটি ইমেল ক্ষেত্র যাতে একটি pattern আছে যা মিলিত হওয়া প্রয়োজন, এটি একটি বৈধ ক্ষেত্র হওয়ার জন্য৷ এই বৈধ মান অবস্থা ব্যবহারকারীকে দেখানো যেতে পারে, তাদের বুঝতে সাহায্য করে যে তারা নিরাপদে পরবর্তী ক্ষেত্রে যেতে পারে।
:in-range সিউডো-ক্লাস পাওয়া যায় যদি একটি ইনপুটে একটি min এবং max থাকে, যেমন একটি সাংখ্যিক ইনপুট এবং মানটি সেই সীমার মধ্যে থাকে।
HTML ফর্মের সাহায্যে, আপনি নির্ধারণ করতে পারেন যে required বৈশিষ্ট্য সহ একটি ক্ষেত্র প্রয়োজন। প্রয়োজনীয় ক্ষেত্রগুলির জন্য :required ছদ্ম-শ্রেণী উপলব্ধ হবে। যে ক্ষেত্রগুলির প্রয়োজন নেই সেগুলিকে :optional pseudo-class দিয়ে নির্বাচন করা যেতে পারে।
তাদের সূচক, ক্রম এবং ঘটনা দ্বারা উপাদান নির্বাচন করা
সিউডো-ক্লাসের একটি গ্রুপ রয়েছে যেগুলি নথিতে কোথায় রয়েছে তার উপর ভিত্তি করে আইটেমগুলি নির্বাচন করে।
:first-child এবং :last-child
আপনি যদি প্রথম বা শেষ আইটেমটি খুঁজে পেতে চান তবে আপনি :first-child এবং :last-child ব্যবহার করতে পারেন। এই সিউডো-ক্লাসগুলি ভাইবোন উপাদানগুলির একটি গ্রুপের প্রথম বা শেষ উপাদানটি ফিরিয়ে দেবে।
:only-child
আপনি :only-child pseudo-class সহ এমন উপাদান নির্বাচন করতে পারেন যার কোনো ভাইবোন নেই।
:first-of-type এবং :last-of-type
আপনি :first-of-type এবং :last-of-type নির্বাচন করতে পারেন যা প্রথমে দেখে মনে হবে তারা একই কাজ করে :first-child এবং :last-child , কিন্তু এই HTMLটি বিবেচনা করুন:
<div class="my-parent">
<p>A paragraph</p>
<div>A div</div>
<div>Another div</div>
</div>
এবং এই CSS:
.my-parent div:first-child {
color: red;
}
কোনো উপাদান লাল রঙের হবে না কারণ প্রথম সন্তানটি একটি অনুচ্ছেদ এবং একটি ডিভ নয়। এই প্রসঙ্গে :first-of-type pseudo-class উপযোগী।
.my-parent div:first-of-type {
color: red;
}
যদিও প্রথম <div> দ্বিতীয় সন্তান, তবুও এটি .my-parent এলিমেন্টের মধ্যে টাইপের প্রথম, তাই এই নিয়মের সাথে, এটি লাল রঙের হবে।
:nth-child এবং :nth-of-type
আপনি প্রথম এবং শেষ শিশু এবং প্রকারের মধ্যে সীমাবদ্ধ নন। :nth-child এবং :nth-of-type ছদ্ম-শ্রেণীগুলি আপনাকে একটি উপাদান নির্দিষ্ট করতে দেয় যা একটি নির্দিষ্ট সূচকে থাকে। CSS নির্বাচকদের মধ্যে সূচীকরণ 1 থেকে শুরু হয়।
:nth-last-child() এবং :nth-last-of-type() ছদ্ম-শ্রেণীগুলি শুরুর পরিবর্তে শেষ থেকে গণনা করা হয়।
আপনি এই ছদ্ম-শ্রেণীতেও একটি সূচকের চেয়ে বেশি পাস করতে পারেন। আপনি যদি সমস্ত জোড় উপাদান নির্বাচন করতে চান তবে আপনি :nth-child(even) ব্যবহার করতে পারেন।
এছাড়াও আপনি আরও জটিল নির্বাচক তৈরি করতে পারেন যা An+B মাইক্রোসিনট্যাক্স ব্যবহার করে নিয়মিত ব্যবধানে আইটেমগুলি খুঁজে পায়।
li:nth-child(3n+3) {
background: yellow;
}
এই নির্বাচক প্রতিটি তৃতীয় আইটেম নির্বাচন করে, আইটেম 3 থেকে শুরু করে। এই এক্সপ্রেশনের n হল সূচী, যা শূন্য থেকে শুরু হয় 3 ( 3n ) আপনি সেই সূচকটিকে কত দিয়ে গুণ করেন।
বলুন আপনার 7 টি <li> আইটেম আছে। নির্বাচিত প্রথম আইটেমটি হল 3 কারণ 3n+3 অনুবাদ করে (3 * 0) + 3 । পরবর্তী পুনরাবৃত্তি আইটেম 6 বাছাই করবে কারণ n এখন 1 এ বৃদ্ধি পেয়েছে, তাই (3 * 1) + 3) । এই অভিব্যক্তিটি :nth-child এবং :nth-of-type উভয়ের জন্যই কাজ করে।
:nth-child() এবং :nth-last-child() একটি "অফ S" সিনট্যাক্স সমর্থন করে যা আপনাকে :nth-of-type() এর মতো নির্বাচকের সাথে মিলগুলি ফিল্টার করতে দেয়। li:nth-of-type(even) হল :nth-child(even of li) সমতুল্য। যদিও :nth-of-type শুধুমাত্র আপনাকে উপাদানের প্রকারের উপর ভিত্তি করে ফিল্টার করতে দেয় (যেমন li বা p ), "অফ S" সিনট্যাক্স আপনাকে যেকোনো নির্বাচকের উপর ফিল্টার করতে দেয়।
আপনার যদি একটি টেবিল থাকে তবে আপনি অন্য প্রতিটি সারিতে স্ট্রাইপ যোগ করতে চাইতে পারেন। যদিও আপনি tr:nth-child(even) দিয়ে প্রতিটি অন্য সারিকে টার্গেট করতে পারেন, আপনি কিছু সারি ফিল্টার করলে এটি কাজ করে না। আপনি যদি hidden অ্যাট্রিবিউট প্রয়োগ করে ফিল্টারিং প্রয়োগ করেন, তাহলে জোড় সারি নির্বাচন করার আগে লুকানো আইটেমগুলিকে প্রি-ফিল্টার করার জন্য আপনি নির্বাচকের সাথে of :not([hidden]) যোগ করতে পারেন।
tr:nth-child(even of :not([hidden])){
background: lightgrey;
}
আপনি এই nth-শিশু পরীক্ষক বা এই পরিমাণ নির্বাচক টুলে এই ধরণের নির্বাচকের সাথে খেলতে পারেন।
:only-of-type
সবশেষে, আপনি ভাইবোনদের একটি গোষ্ঠীতে একটি নির্দিষ্ট ধরণের একমাত্র উপাদান খুঁজে পেতে পারেন :only-of-type এর সাথে। আপনি যদি শুধুমাত্র একটি আইটেম সহ তালিকা নির্বাচন করতে চান বা আপনি যদি একটি অনুচ্ছেদে একমাত্র সাহসী উপাদান খুঁজে পেতে চান তবে এটি কার্যকর।
খালি উপাদান খোঁজা
এটি কখনও কখনও সম্পূর্ণ খালি উপাদানগুলি সনাক্ত করতে কার্যকর হতে পারে এবং এটির জন্যও একটি ছদ্ম-শ্রেণী রয়েছে।
:empty
যদি কোনো উপাদানের কোনো সন্তান না থাকে, তাহলে :empty ছদ্ম-শ্রেণী তাদের ক্ষেত্রে প্রযোজ্য। যদিও বাচ্চারা শুধুমাত্র HTML উপাদান বা টেক্সট নোড নয়: এগুলি হোয়াইটস্পেসও হতে পারে, যা আপনি যখন নিম্নলিখিত HTML ডিবাগ করছেন এবং ভাবছেন কেন এটি :empty সাথে কাজ করছে না তখন বিভ্রান্তিকর হতে পারে।
<div>
</div>
কারণ হল খোলার এবং বন্ধ করার মধ্যে কিছু হোয়াইটস্পেস আছে <div> , তাই :empty কাজ করবে না।
আপনার যদি HTML-এর উপর সামান্য নিয়ন্ত্রণ থাকে এবং WYSIWYG বিষয়বস্তু সম্পাদকের মতো খালি উপাদানগুলিকে আড়াল করতে চান তাহলে :empty pseudo-class কার্যকর হতে পারে। এখানে, একজন সম্পাদক একটি বিপথগামী, খালি অনুচ্ছেদ যোগ করেছেন।
<article class="post">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p></p>
<p>Curabitur blandit tempus porttitor.</p>
</article>
:empty দিয়ে, আপনি এটি খুঁজে পেতে এবং লুকাতে পারেন।
.post :empty {
display: none;
}
একাধিক উপাদান খুঁজে বের করা এবং বাদ দেওয়া
কিছু সিউডো-ক্লাস আপনাকে আরও কমপ্যাক্ট CSS লিখতে সাহায্য করে।
:is()
আপনি যদি .post এলিমেন্টে h2 , li এবং img চাইল্ড এলিমেন্টের সবগুলো খুঁজে পেতে চান, তাহলে আপনি এইরকম একটি নির্বাচক তালিকা লিখতে পারেন:
.post h2,
.post li,
.post img {
…
}
:is() ছদ্ম-শ্রেণীর সাথে, আপনি আরও কমপ্যাক্ট সংস্করণ লিখতে পারেন:
.post :is(h2, li, img) {
/* ... */
}
:is ছদ্ম-শ্রেণি শুধুমাত্র একটি নির্বাচক তালিকার চেয়ে বেশি কম্প্যাক্ট নয় বরং এটি আরও ক্ষমাশীল। বেশিরভাগ ক্ষেত্রে, যদি একটি নির্বাচক তালিকায় একটি ত্রুটি বা অসমর্থিত নির্বাচক থাকে, তাহলে সম্পূর্ণ নির্বাচক তালিকা আর কাজ করবে না। যদি একটি :is ছদ্ম-শ্রেণিতে পাস করা নির্বাচকদের মধ্যে কোনো ত্রুটি থাকে, তাহলে এটি অবৈধ নির্বাচককে উপেক্ষা করবে, কিন্তু যেগুলি বৈধ সেগুলি ব্যবহার করবে৷
:not()
আপনি :not() pseudo-class দিয়ে আইটেমগুলিকে বাদ দিতে পারেন। উদাহরণস্বরূপ, আপনি এটি ব্যবহার করতে পারেন এমন সমস্ত লিঙ্ক স্টাইল করার জন্য যেগুলির কোনও class অ্যাট্রিবিউট নেই৷
a:not([class]) {
color: blue;
}
A :not সিউডো-ক্লাস আপনাকে অ্যাক্সেসযোগ্যতা উন্নত করতে সাহায্য করতে পারে। উদাহরণস্বরূপ, একটি <img> একটি alt থাকতে হবে, এমনকি এটি একটি খালি মান হলেও, তাই আপনি একটি CSS নিয়ম লিখতে পারেন যা অবৈধ চিত্রগুলিতে একটি মোটা লাল রূপরেখা যোগ করে:
img:not([alt]) {
outline: 10px red;
}
:has()
আপনি যদি তাদের ভিতরে থাকা উপাদানগুলির উপর ভিত্তি করে স্টাইল করতে চান তবে কী হবে? আপনি এটি করতে :has() ছদ্ম-শ্রেণী ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি আইকনগুলি সহ বোতামগুলিতে শৈলী প্রয়োগ করতে চাইতে পারেন।
button:has(svg) {
/* ... */
}
এর সবচেয়ে মৌলিক কনফিগারেশনে, আগের উদাহরণের মতো, আপনি :has() একজন অভিভাবক নির্বাচক হিসেবে ভাবতে পারেন। আপনি অন্যান্য উপাদানকে লক্ষ্য করতে অন্যান্য নির্বাচকদের সাথে মিলিত অভিভাবক নির্বাচককেও ব্যবহার করতে পারেন।
form:has(input:valid) label {
font-weight: bold;
}
form:has(input:valid) label::after {
content: "✅";
}
এই উদাহরণে আমরা লেবেল উপাদান এবং label::after ছদ্ম-উপাদানে শৈলী প্রয়োগ করছি যখন ফর্ম ইনপুটে একটি valid ছদ্ম-শ্রেণী থাকে।
:has() ছদ্ম-শ্রেণী অন্য :has() এর ভিতরে নেস্ট করা যায় না, তবে এটি অন্যান্য ছদ্ম-শ্রেণীর সাথে মিলিত হতে পারে।
:is(h1, h2, h3):has(a) {
/* ... */
}
নির্বাচক তালিকা ক্ষমার অযোগ্য, তাই যদি তালিকার কোনো নির্বাচক অবৈধ হয়, সমস্ত শৈলী নিয়ম উপেক্ষা করা হবে।
.my-element:has(img, ::before) {
/* any styles here will be discarded since pseudo elements can't be included in the :has() selector list */
}
আপনার উপলব্ধি পরীক্ষা করুন
ছদ্ম ক্লাস আপনার জ্ঞান পরীক্ষা
সিউডো-ক্লাসগুলি এমনভাবে কাজ করে যেন একটি ক্লাস একটি উপাদানের উপর গতিশীলভাবে প্রয়োগ করা হয়েছে, যখন ছদ্ম-উপাদানগুলি একটি উপাদানের উপর কাজ করে।
: নির্বাচকের মধ্যে একটি মূল বিশিষ্ট অক্ষর হিসাবেনিচের কোনটি কার্যকরী সিউডো-শ্রেণী?
:is():target() থাকে, বোঝাতে যে তারা পরামিতিগুলি গ্রহণ করে।:empty() থাকে, বোঝাতে যে তারা পরামিতিগুলি গ্রহণ করে।:not()নিম্নলিখিত কোন ছদ্ম-শ্রেণি একটি ব্যবহারকারী-মিথস্ক্রিয়া কারণে হয়?
:hover:press:squeeze:target:focus-within নিচের কোনটি <form> স্টেট সিউডো ক্লাস?
:enabled:fresh:indeterminate:checked:in-range:loading:valid