সিএসএস ::আগে এবং ::পরে নির্বাচক:একটি ব্যবহারিক উপায় নির্দেশিকা

সিএসএস ::নির্বাচক একটি নির্বাচিত উপাদানের আগে বিষয়বস্তু সন্নিবেশ করার আগে। CSS:একটি নির্দিষ্ট উপাদানের পরে সামগ্রী সন্নিবেশ করার পরে। এই নির্বাচকরা সাধারণত অনুচ্ছেদ বা লিঙ্কের আগে বা পরে পাঠ্য যোগ করতে ব্যবহৃত হয়।

আপনি যখন একটি ওয়েবসাইট ডিজাইন করছেন, আপনি একটি উপাদানের বিষয়বস্তু প্রদর্শিত হওয়ার আগে বা পরে সামগ্রী যোগ করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনি একটি তালিকায় প্রতিটি বুলেট পয়েন্টের আগে একটি ছবি যোগ করতে চাইতে পারেন।

এখানেই CSS ::before এবং ::after pseudo-elements আসে। এই pseudo-elements আপনাকে একটি উপাদানের বিষয়বস্তুর আগে বা পরে কন্টেন্ট সন্নিবেশ করতে দেয়।

এই টিউটোরিয়ালটি উদাহরণের সাথে আলোচনা করবে, কিভাবে একটি ওয়েব পেজে বিষয়বস্তু সাজাতে ::before এবং ::after pseudo-elements ব্যবহার করতে হয়। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি CSS-এ ::before এবং ::after pseudo-elements ব্যবহারে বিশেষজ্ঞ হয়ে উঠবেন।

সিএসএস সিউডো-এলিমেন্টস

একটি ছদ্ম-উপাদান হল একটি বিশেষ কীওয়ার্ড যা আপনাকে একটি CSS নির্বাচক দ্বারা নির্বাচিত উপাদানগুলির একটি নির্দিষ্ট অংশকে স্টাইল করতে দেয়। আমরা এই নিবন্ধে ছদ্ম-উপাদানগুলিকে নির্বাচক হিসাবে উল্লেখ করতে যাচ্ছি কারণ প্রতিটি ছদ্ম-উপাদান একটি নির্বাচক৷

সিউডো-এলিমেন্টগুলি উপযোগী হয় যখন আপনি উপাদানটিতে কোনও CSS ক্লাস বা আইডি যোগ না করে একটি উপাদানে একটি স্টাইল প্রয়োগ করতে চান। উদাহরণস্বরূপ, আপনি যদি একটি ওয়েব পৃষ্ঠার প্রতিটি লিঙ্কের পরে একটি ">" তীর যোগ করতে চান, আপনি একটি ছদ্ম-উপাদান ব্যবহার করতে পারেন৷

CSS সিউডো-এলিমেন্টের বিস্তৃত পরিসর অফার করে। এর মধ্যে রয়েছে ::প্রথম লাইন, ::প্রথম চিঠি, ::আগে এবং ::পরে। এই টিউটোরিয়ালের উদ্দেশ্যে, আমরা শেষ দুটিতে ফোকাস করব:::আগে এবং ::পরে৷

ছদ্ম-উপাদানগুলি সাধারণত একটি ডাবল কোলন (::) ব্যবহার করে উপস্থাপন করা হয়। যদিও CSS3 একটি ছদ্ম-উপাদান ঘোষণা করতে একক কোলন সিনট্যাক্স (:) ব্যবহার করে সমর্থন করে, দুটি কোলন স্বরলিপি ব্যবহার করা সর্বোত্তম অনুশীলন।

এর কারণ হল দুটি কোলন স্বরলিপি সিউডো-এলিমেন্ট থেকে ছদ্ম-শ্রেণীকে আলাদা করতে ব্যবহৃত হয়।

সিএসএস ::সিউডো-এলিমেন্টের আগে

::ছদ্ম-উপাদানের আগে এমন বিষয়বস্তু যোগ করে যা একটি ওয়েব পৃষ্ঠায় একটি উপাদানের আগে উপস্থিত হয়। প্রায়শই, এই উপাদানটি একটি অনুচ্ছেদের আগে পাঠ্য যোগ করতে ব্যবহৃত হয়।

::বিফোর সিউডো-এলিমেন্টের সিনট্যাক্স হল:

selector::before {
 // CSS rules
}

যে উপাদানটিতে আপনি নির্বাচক প্রয়োগ করতে চান তার নামের পরে ::নির্বাচক যোগ করা হয়।

এখানে ::বিফোর সিউডো-এলিমেন্ট:

• নির্বাচক নির্বাচককে বোঝায় যেখানে ::আগে প্রয়োগ করা উচিত। সুতরাং, আপনি যদি প্রতিটি "a" ট্যাগে একটি ::before উপাদান প্রয়োগ করতে চান, তাহলে আপনার নির্বাচক হবে "a"। অথবা আপনি যদি ক্লাস নামের "লিঙ্ক" সহ প্রতিটি উপাদানের আগে একটি ::before উপাদান প্রয়োগ করতে চান, তাহলে আপনি ".link" নির্বাচক ব্যবহার করবেন৷
• ::আগে ব্রাউজারকে সিএসএস নিয়মের বিষয়বস্তু নির্বাচকের আগে যোগ করতে বলে।
• CSS নিয়ম যে নিয়মগুলি নির্বাচকের আগে প্রয়োগ করা উচিত৷

সিএসএস-এ নির্বাচকরা কীভাবে কাজ করে সে সম্পর্কে আপনি যদি আরও জানতে আগ্রহী হন, তাহলে সিএসএস নির্বাচকদের জন্য আমাদের নির্দেশিকা পড়ুন।

কিভাবে ::ছদ্ম-উপাদান কাজ করে তা প্রদর্শন করার জন্য আসুন একটি উদাহরণ দিয়ে চলুন।

::CSS উদাহরণের আগে

ধরুন আমরা একটি উদাহরণ ওয়েব পেজের প্রতিটি লিঙ্কের আগে একটি লিঙ্ক ইমোজি (🔗) যোগ করতে চাই। আমরা নিম্নলিখিত কোড ব্যবহার করে এই কাজটি সম্পন্ন করতে পারি:

আমাদের কোড ফিরে আসে:

আমাদের HTML ফাইলে, আমরা একটি HTML ট্যাগ সংজ্ঞায়িত করেছি যা ক্যারিয়ার কর্মের হোমপেজে লিঙ্ক করে। তারপর, আমাদের CSS ফাইলে, আমরা আমাদের ওয়েব পৃষ্ঠায় প্রতিটি ট্যাগের আগে লিঙ্ক ইমোজি যোগ করতে ::before pseudo-element ব্যবহার করেছি।

আমাদের নিয়ম আমাদের তৈরি করা ট্যাগের শুরুতে একটি লিঙ্ক ইমোজি যোগ করেছে।

"কন্টেন্ট" অ্যাট্রিবিউটের মান হতে পারে:

• একটি স্ট্রিং, যেমন "এটি একটি স্ট্রিং।".
• একটি কাউন্টার, যেমন “কাউন্টার(লি);”।
• একটি ছবি, যেমন “url(/path/to/image.png)”।
• একটি ফাঁকা স্ট্রিং, যেমন “”।

আপনি কন্টেন্ট অ্যাট্রিবিউটে একটি HTML উপাদান সন্নিবেশ করতে পারবেন না।

সিএসএস ::সিউডো-এলিমেন্টের পরে

সিএসএস ::আফটার সিউডো-এলিমেন্ট একটি ওয়েব পৃষ্ঠায় একটি উপাদানের পরপরই সামগ্রী যোগ করার অনুমতি দেয়। যেমন ::before নির্বাচক, ::after প্রায়ই লিঙ্ক বা পাঠ্যের অনুচ্ছেদের সাথে ব্যবহার করা হয়।

::আফটার সিউডো-এলিমেন্টের সিনট্যাক্স নিম্নরূপ:

selector::after {
 // CSS rules
}

::after-এর সিনট্যাক্স ::before pseudo-element-এর সিনট্যাক্সের মতই। ::পরে "সামগ্রী" বৈশিষ্ট্যের জন্য একই মান গ্রহণ করে যা আমরা আগে আলোচনা করেছি।

::CSS উদাহরণের পরে

ধরুন আমরা হ্যানসন্স বেকারি নামে একটি বেকারির জন্য একটি ওয়েবসাইটে একটি লিঙ্ক উপাদান ডিজাইন করছি। এই লিঙ্কটি "হ্যানসন্স বেকারি হোমপেজে যান।" পাঠ্য প্রদর্শন করা উচিত আমাদের লিঙ্কটি একটি 1px-চওড়া কঠিন কালো বর্ডার দ্বারা বেষ্টিত হওয়া উচিত৷

৷

"ক্যারিয়ার কর্ম আমার জীবনে প্রবেশ করেছিল যখন আমার এটির সবচেয়ে বেশি প্রয়োজন ছিল এবং দ্রুত আমাকে একটি বুটক্যাম্পের সাথে মেলাতে সাহায্য করেছিল৷ স্নাতক হওয়ার দুই মাস পরে, আমি আমার স্বপ্নের চাকরি পেয়েছি যা আমার মূল্যবোধ এবং জীবনের লক্ষ্যগুলির সাথে সামঞ্জস্যপূর্ণ!"

ভেনাস, রকবটের সফটওয়্যার ইঞ্জিনিয়ার

আপনার বুটক্যাম্প ম্যাচ

খুঁজুন

আমাদের লেবেলের পরে, আমরা বিষয়বস্তু সহ পাঠ্যের একটি বাক্স দেখতে চাই এই পৃষ্ঠাটি আমাদের বেকড পণ্য মেনু দেখায়। ("This" শব্দের আগে সাদা স্থানটি লক্ষ্য করুন।) আমাদের বক্সে একটি কমলা HTML ব্যাকগ্রাউন্ড রঙ থাকা উচিত।

আমরা নিম্নলিখিত কোড ব্যবহার করে এই কাজটি সম্পন্ন করতে পারি:

index.html
<a href="/" class="label">Go to the Hansons Bakery homepage.</a>
styles.css
.label {
 border: 1px solid black;
}
.label::after {
 content: " This page shows off our baked goods menu.";
 background-color: orange;
}

আমাদের কোড এমন সামগ্রী তৈরি করেছে যা দেখতে এইরকম:

আমাদের কোডে, আমরা একটি ট্যাগ ব্যবহার করে আমাদের হোমপেজে একটি লিঙ্ক সংজ্ঞায়িত করেছি। আমাদের লিঙ্কের সাথে যুক্ত ক্লাসের নাম হল .label .