CSS এ অ্যাট্রিবিউট নির্বাচক কি? | সম্পূর্ণ গাইড

আপনি যদি আপনার ওয়েবসাইটে শৈলীর নিয়ম প্রয়োগ করতে চান, তারপর নির্বাচকরা নির্দেশিত সম্পদ। বিভিন্ন ধরণের নির্বাচক রয়েছে, যার মধ্যে কয়েকটি বেশি জনপ্রিয়। এই জন্য আজ আমরা আপনাকে দেখাই সিএসএস-এ কী কী বৈশিষ্ট্য নির্বাচক, যাতে আপনি এই সরঞ্জামগুলি থেকে সর্বাধিক পেতে পারেন।

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

CSS মানে কি?

আপনি যদি ওয়েব ডিজাইনের জগতের সাথে যুক্ত হন তবে আপনি এই শব্দটি প্রায়শই শুনে থাকবেন। ক্যাসকেডিং শৈলী শীট (CSS) হল একটি প্রোগ্রামিং ভাষা যা আপনাকে দ্রুত এবং সহজে একটি HTML নথি তৈরি এবং পরিবর্তন করতে দেয়। এর মানে হল এটি এমন একটি ভাষা যার সাহায্যে আপনি ডিজাইন পরিচালনা করতে পারেন, পরিবর্তন করতে পারেন, উপস্থাপনা করতে পারেন, উন্নতি করতে পারেন এবং ওয়েব পৃষ্ঠাগুলিকে ব্যক্তিগতকৃত করতে পারেন৷ এর নামটি এই সত্য থেকে এসেছে যে এটি আপনাকে বিভিন্ন শীটে অন্যের কাছ থেকে উত্তরাধিকারসূত্রে প্রাপ্ত বৈশিষ্ট্যগুলি গণনা করতে দেয়। ওয়েব ডিজাইনে একে জলপ্রপাত বলা হয়।

CSS এ অ্যাট্রিবিউট নির্বাচক কি?

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

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

CSS-এ, নির্বাচকরা আমাদের ওয়েব পৃষ্ঠার এইচটিএমএল উপাদানগুলিকে সীমাবদ্ধ করতে পরিবেশন করে যেখানে আমরা একটি শৈলী প্রয়োগ করতে চাই। CSS এর অনেক নির্বাচক রয়েছে যা আপনাকে উপাদান নির্বাচন করতে দেয় শৈলী প্রয়োগ করার সময়। এই তথাকথিত বৈশিষ্ট্য নির্বাচকরা নিশ্চিত করে যে আপনি তাদের বৈশিষ্ট্য এবং/অথবা মানের উপর ভিত্তি করে HTML উপাদান নির্বাচন করেন।

বৈশিষ্ট্য নির্বাচকের ধরন কি কি?

• [নাম গুন] এমন উপাদান নির্বাচন করে যেটির মান নির্বিশেষে attribute_name নামের বৈশিষ্ট্যটি সেট করা আছে।
• [attribute_name=value] এমন উপাদান নির্বাচন করে যার নাম attribute_name নামক একটি মানের সমান মান সেট করা আছে।
• [এট্রিবিউট_নাম~=মান] অ্যাট্রিবিউট_নাম সেট নামে একটি অ্যাট্রিবিউট আছে এমন উপাদান নির্বাচন করে এবং অ্যাট্রিবিউটের অন্তত একটি মান হল মান।
• [অ্যাট্রিবিউট_নাম|=মান], অ্যাট্রিবিউট_নাম সেট নামক একটি বৈশিষ্ট্য আছে এমন উপাদান নির্বাচন করে।
• [এট্রিবিউট_নাম$=মান] ট্যাগ নির্বাচন করুন যার বৈশিষ্ট্য এই মান দিয়ে শেষ হয়।
• [এট্রিবিউট_নাম^=মান] ট্যাগ নির্বাচন করে যার বৈশিষ্ট্য এই মান দিয়ে শুরু হয়।

কিভাবে বড় হাতের অক্ষর এবং ছোট হাতের অক্ষর সম্পর্কিত?

আপনি যদি বৈশিষ্ট্যগুলির মান সম্পর্কিত করতে চান কেস-সংবেদনশীল, আপনি বন্ধ বন্ধনীর আগে "i" মান ব্যবহার করতে পারেন। এই পতাকাটি ব্রাউজারকে সমস্ত ASCII অক্ষরগুলিকে মেলাতে বলে, সেগুলি বড় হাতের বা ছোট হাতের অক্ষর নির্বিশেষে। এই পতাকা ব্যতীত, নথির কেস-সংবেদনশীল ভাষা নির্দেশিকা অনুসারে মানগুলি সংযুক্ত করা হয়। HTML কেস সংবেদনশীল।

বৈশিষ্ট্য নির্বাচক অপারেটর কি?

আমরা ব্যবহার করতে পারি বৈশিষ্ট্য নির্বাচকদের জন্য কিছু অপারেটর যেগুলি এতটা সুপরিচিত নয় এবং এটি আমাদের পরামর্শ দেওয়া বৈশিষ্ট্যগুলিতে নির্দিষ্ট মানগুলির উপস্থিতি উল্লেখযোগ্যভাবে পরিমার্জন করতে দেয়৷

এগুলি হল অ্যাট্রিবিউট নির্বাচকদের মধ্যে উপলব্ধ অপারেটর৷

• *= (ধারণ করে): * অপারেটর আপনাকে অন্তত একবার একটি বৈশিষ্ট্যের মান হিসাবে একটি নির্দিষ্ট স্ট্রিং আছে এমন উপাদান নির্বাচন করতে দেয়।
• ^= (অ্যাট্রিবিউট মানের শুরুতে ঘটে): এমন উপাদানগুলি বেছে নিন যেখানে একটি বৈশিষ্ট্য রয়েছে যার মান একটি নির্দিষ্ট স্ট্রিং দিয়ে শুরু হয়।
• $= (অ্যাট্রিবিউট মানের শেষে ঘটে): এমন উপাদান নির্বাচন করে যার একটি বৈশিষ্ট্য রয়েছে যার মান একটি নির্দিষ্ট স্ট্রিং দিয়ে শেষ হয়।
• ~= (একটি সঠিক শব্দ রয়েছে বা স্পেস দ্বারা পৃথক করা হয়েছে): এমন উপাদানগুলি বেছে নেয় যার বৈশিষ্ট্যের মানটিতে এমন সামগ্রী রয়েছে যা একটি নির্দিষ্ট স্ট্রিংয়ের সাথে হুবহু মেলে, বা যেটিতে একটি নির্দিষ্ট স্ট্রিং সহ একটি স্থান-বিচ্ছিন্ন শব্দ রয়েছে৷
• |= (সঠিক শব্দ রয়েছে বা হাইফেন দ্বারা পৃথক করা হয়েছে): উপরের মতই, কিন্তু শব্দটিকে শূন্যস্থানের পরিবর্তে হাইফেন দ্বারা পৃথক করা যেতে পারে।

সিএসএসে নির্বাচকরা কীভাবে ব্যবহার করবেন?

সিএসএস-এ নির্বাচকদের ব্যবহার করার দুটি সম্ভাব্য উপায় রয়েছে। আপনার যদি একই নথিতে HTML কোড এবং CSS কোড থাকে, আপনাকে যা করতে হবে তা হল আপনার সাইটের মাথায় একটি CSS নির্বাচক যোগ করুন।

অন্যদিকে, যদি আপনার HTML এবং CSS আলাদা নথিতে থাকে, আপনার index.html নামে একটি নথি থাকতে পারে এবং style.css নামে আরেকটি ডকুমেন্ট। index.html ফাইলে অবশ্যই কোডের একটি লাইন থাকতে হবে যা CSS ফাইলকে কল করে, যাতে আপনার ওয়েবসাইটে স্টাইলগুলি সঠিকভাবে প্রদর্শিত হয়।

সিএসএস-এ আমরা অন্য কোন ধরনের নির্বাচক খুঁজে পাই?

নির্বাচকদের বিভিন্ন দল রয়েছে। আপনার কি ধরণের নির্বাচক প্রয়োজন সে সম্পর্কে সচেতন হন আপনার প্রকল্পের জন্য আদর্শ টুল ব্যবহার করতে সাহায্য করবে. এজন্য আমরা আপনাকে নীচে কিছু দেখাই:

প্রকার, শ্রেণী এবং শনাক্তকারী নির্বাচক

এই গ্রুপ অন্তর্ভুক্ত নির্বাচক যারা একটি HTML উপাদানকে সীমাবদ্ধ করে, একটি ফাইলের মত। এটিতে এমন নির্বাচকও রয়েছে যা একটি শ্রেণি বা শনাক্তকারীকে সীমাবদ্ধ করে।

Pseudoclasses এবং pseudoelements

নির্বাচকদের এই গোষ্ঠীর মধ্যে রয়েছে সিউডোক্লাস, যা তারা একটি উপাদান নির্দিষ্ট অবস্থা বিন্যাস. উদাহরণস্বরূপ, হোভার ছদ্ম-শ্রেণি একটি উপাদান নির্বাচন করে যখন মাউস এটির উপর ঘোরে। এছাড়াও ছদ্ম-উপাদানগুলি অন্তর্ভুক্ত করে যা উপাদানের পরিবর্তে একটি উপাদানের একটি নির্দিষ্ট অংশ নির্বাচন করে

কম্বাইনার

এই সিরিজের মাধ্যমে নির্বাচকরা অন্যান্য নির্বাচকরা একত্রিত হয়, আমাদের নথির বিভিন্ন উপাদান আলাদা করার লক্ষ্যে।

সর্বজনীন নির্বাচক

স্বয়ংক্রিয়ভাবে তারকাচিহ্ন (*) যা সর্বজনীন নির্বাচক প্রতীক, একটি নির্দিষ্ট নথির সমস্ত উপাদান নির্বাচন করে।

আইডি নির্বাচক

আইডি অ্যাট্রিবিউটের উপর ভিত্তি করে উপাদান নির্বাচন করার উদ্দেশ্য নিয়ে এই ধরনের অর্জন করা হয়েছে।

আপনি যদি একটি ওয়েবসাইটে ঘটে যাওয়া সবকিছু নিয়ন্ত্রণ করতে চান, নিশ্চিতভাবে এটি পেতে সর্বোত্তম উপায় আপনার নিজের নকশা মাধ্যমে. তাদের জন্য আপনি অ্যাট্রিবিউট সিলেক্টরের মতো টুল ব্যবহার করতে পারেন। তাই আপনি যদি সিএসএস-এ কোন বৈশিষ্ট্য নির্বাচকরা ভাবছেন, এই নিবন্ধে আমরা আপনাকে উত্তর দেওয়া আছে আশা করি. আপনি যদি মনে করেন যে আমরা গুরুত্বপূর্ণ কিছু বাদ দিয়েছি, আমাদের মন্তব্যে জানান।