সিএসএস 3 নির্বাচক সুপারিশ উভয় সম্পর্কে চমত্কার স্পষ্ট, কিন্তু আমি যাহাই হউক না কেন পার্থক্য দেখানোর জন্য চেষ্টা করব।
সিউডো-ক্লাস
সরকারী বিবরণ
ছদ্ম-শ্রেণীর ধারণাটি ডকুমেন্ট গাছের বাইরে থাকা বা অন্যান্য সাধারণ নির্বাচক ব্যবহার করে প্রকাশ করা যায় না এমন তথ্যের ভিত্তিতে নির্বাচনের অনুমতি দেওয়ার জন্য প্রবর্তিত হয়েছিল।
একটি সিউডো-বর্গ সর্বদা একটি "কোলন" নিয়ে গঠিত হয় (: ) এর পরে সিউডো-শ্রেণীর নাম এবং optionচ্ছিকভাবে প্রথম বন্ধনীগুলির মধ্যে একটি মান দ্বারা গঠিত।
সিউডো-ক্লাসগুলি কোনও নির্বাচকের মধ্যে থাকা সাধারণ নির্বাচকদের সমস্ত ক্রমগুলিতে অনুমোদিত। নেতৃস্থানীয় টাইপ সিলেক্টর বা সার্বজনীন নির্বাচক (সম্ভবত বাদ দেওয়া) পরে সাধারণ সিলেক্টরগুলির ক্রমানুসারে সিউডো-ক্লাসগুলি যে কোনও জায়গায় অনুমোদিত। ছদ্ম-শ্রেণীর নামগুলি কেস-সংবেদনশীল। কিছু সিউডো-ক্লাস পারস্পরিক একচেটিয়া হয়, অন্যরা একই উপাদানটিতে একই সাথে প্রয়োগ করা যেতে পারে। সিউডো-ক্লাসগুলি গতিশীল হতে পারে, এই অর্থে যে কোনও ব্যবহারকারী নথির সাথে ইন্টারেক্ট করার সময় কোনও সিউডো-ক্লাস অর্জন করতে বা হারাতে পারে।
সূত্র
এটার মানে কি?
ছদ্ম-শ্রেণীর গুরুত্বপূর্ণ প্রকৃতিটি প্রথম বাক্যেই বর্ণিত হয়েছে: "ছদ্ম-শ্রেণীর ধারণা [...] অনুমতি নির্বাচন " । এটি "ডকুমেন্ট গাছের বাইরে থাকা" তথ্যের ভিত্তিতে উপাদানগুলির মধ্যে পার্থক্য করতে স্টাইলশিটের লেখককে সক্ষম করে , উদাহরণস্বরূপ কোনও লিঙ্কের ( :active, :visited) বর্তমান অবস্থা । এগুলি ডিওএমে কোথাও সংরক্ষিত নেই এবং এই বিকল্পগুলি অ্যাক্সেস করার জন্য কোনও ডোম ইন্টারফেস নেই।
অন্যদিকে, :targetডিওএম ম্যানিপুলেশনের মাধ্যমে অ্যাক্সেস করা যায় (আপনি window.location.hashজাভাস্ক্রিপ্ট সহ বস্তুটি সন্ধান করতে ব্যবহার করতে পারেন ) তবে এটি "অন্যান্য সাধারণ নির্বাচক ব্যবহার করে প্রকাশ করা যায় না" ।
সুতরাং মূলত একটি সিউডো-শ্রেণি অন্যান্য সাধারণ নির্বাচক হিসাবে নির্বাচিত উপাদানগুলির সেটকে পরিমার্জন করবে একটি সহজ নির্বাচকরা ক্রম । নোট করুন যে সরল নির্বাচকদের ক্রমের সমস্ত সাধারণ নির্বাচক একই সাথে মূল্যায়ন করা হবে। সিউডো-ক্লাসের সম্পূর্ণ তালিকার জন্য সিএসএস 3 নির্বাচকের সুপারিশটি পরীক্ষা করে দেখুন।
উদাহরণ
নিম্নলিখিত উদাহরণটি সমস্ত এমনকি সারিগুলি ধূসর ( #ccc) রঙ করবে , সমস্ত অসম সারি যা 5 সাদা এবং প্রতিটি অন্যান্য সারি ম্যাজেন্টা দ্বারা বিভাজ্য নয়।
table tr:nth-child(2n) td{
background-color: #ccc;
}
table tr:nth-child(2n+1) td{
background-color: #fff;
}
table tr:nth-child(2n+1):nth-child(5n) td{
background-color: #f0f;
}
সিউডো-উপাদানসমূহ
সরকারী বিবরণ
সিউডো-উপাদানগুলি নথির ভাষার দ্বারা নির্দিষ্ট করে ডকুমেন্ট ট্রি সম্পর্কে বিমূর্ততা তৈরি করে। উদাহরণস্বরূপ, নথির ভাষাগুলি কোনও উপাদানের সামগ্রীর প্রথম অক্ষর বা প্রথম লাইন অ্যাক্সেস করার প্রক্রিয়া সরবরাহ করে না। সিউডো-এলিমেন্টগুলি লেখকদের এটিকে অন্যথায় অ্যাক্সেস অযোগ্য তথ্য উল্লেখ করতে মঞ্জুরি দেয়। সিউডো-উপাদানগুলি লেখকগুলিকে উত্স নথিতে বিদ্যমান নেই এমন সামগ্রীর উল্লেখ করার উপায় প্রদান করতে পারে (উদাহরণস্বরূপ, ::beforeএবং::after সিউডো উপাদানগুলি উত্পন্ন সামগ্রীতে অ্যাক্সেস দেয়)।
সিউডো-এলিমেন্টটি দুটি কলোন ( ::) দ্বারা তৈরি হয় যার পরে সিউডো-এলিমেন্টের নাম।
::ছদ্ম-শ্রেণি এবং ছদ্ম-উপাদানগুলির মধ্যে বৈষম্য প্রতিষ্ঠার জন্য বর্তমান নথির মাধ্যমে এই স্বরলিপিটি প্রবর্তিত হয়েছে। বিদ্যমান স্টাইল শিটের সাথে সামঞ্জস্যের জন্য, ব্যবহারকারী এজেন্টগুলি সিএসএস স্তরের 1 এবং 2 তে প্রবর্তিত সিউডো-উপাদানগুলির জন্য পূর্ববর্তী ওয়ান-কোলন স্বরলিপিটিও গ্রহণ করতে হবে (যথা: প্রথম-লাইন, প্রথম-অক্ষর,: আগে এবং: পরে)। এই নির্দিষ্টকরণে প্রবর্তিত নতুন সিউডো-উপাদানগুলির জন্য এই সামঞ্জস্যের অনুমতি নেই।
নির্বাচকের জন্য কেবলমাত্র একটি সিউডো-এলিমেন্ট উপস্থিত হতে পারে এবং যদি উপস্থিত থাকে তবে এটি অবশ্যই নির্বাচকের বিষয়গুলিকে উপস্থাপনকারী সরল নির্বাচকদের ক্রমের পরে উপস্থিত হতে হবে।
দ্রষ্টব্য: এই স্পেসিফিকেশনের ভবিষ্যতের সংস্করণটি প্রতি নির্বাচককে একাধিক সিউডো-উপাদানগুলির অনুমতি দিতে পারে।
সূত্র
এটার মানে কি?
এখানে সর্বাধিক গুরুত্বপূর্ণ অংশটি হ'ল "ছদ্ম-উপাদানগুলি লেখককে [..] অন্যথায় অ্যাক্সেসযোগ্য তথ্য " উল্লেখ করতে অনুমতি দেয় এবং তারা "লেখকগুলিকে উত্স নথিতে উপস্থিত না থাকা বিষয়বস্তুগুলিকে উল্লেখ করার উপায়ও সরবরাহ করতে পারে (যেমন, ::beforeএবং ::afterসিউডো-উপাদানগুলি উত্পন্ন সামগ্রীতে অ্যাক্সেস দেয়) । সবচেয়ে বড় পার্থক্য হ'ল তারা প্রকৃতপক্ষে একটি নতুন ভার্চুয়াল উপাদান তৈরি করে যার উপর নিয়ম এবং এমনকি সিউডো-শ্রেণীর নির্বাচকদের প্রয়োগ করা যেতে পারে। তারা উপাদানগুলিকে ফিল্টার করে না, তারা মূলত কন্টেন্ট ফিল্টার করে ( ::first-line, ::first-letter) এবং এটি ভার্চুয়াল ধারকটিতে গুটিয়ে রাখে, যা লেখক চাইলে স্টাইল করতে পারেন (ভাল, প্রায়)।
উদাহরণস্বরূপ ::first-lineসিউডো উপাদানটি জাভাস্ক্রিপ্টের সাথে পুনর্গঠন করা যায় না, কারণ এটি বর্তমানে ব্যবহৃত ব্যবহৃত ফন্ট, ফন্টের আকার, উপাদানগুলির প্রস্থ, ভাসমান উপাদানগুলি (এবং সম্ভবত দিনের সময়) এর উপর নির্ভর করে। ঠিক আছে, এটি সম্পূর্ণ সত্য নয়: কেউ এখনও সেই সমস্ত মান গণনা করতে পারে এবং প্রথম লাইনটি বের করতে পারে, তবে এটি করা খুব জটিল কাজ।
আমার ধারণা সবচেয়ে বড় পার্থক্যটি হ'ল "নির্বাচকের জন্য কেবলমাত্র একটি সিউডো-এলিমেন্ট উপস্থিত হতে পারে" । নোটটিতে বলা হয়েছে যে এটি পরিবর্তনের বিষয় হতে পারে, তবে 2012 হিসাবে আমি বিশ্বাস করি না যে আমরা ভবিষ্যতে কোনও ভিন্ন আচরণ দেখতে পাই ( এটি এখনও সিএসএস 4 এ রয়েছে )।
উদাহরণ
নিম্নলিখিত উদাহরণটি সিউডো-ক্লাস :langএবং সিউডো-এলিমেন্ট ব্যবহার করে প্রদত্ত পৃষ্ঠায় প্রতিটি উদ্ধৃতিতে একটি ভাষা-ট্যাগ যুক্ত করবে ::after:
q:lang(de)::after{
content: " (German) ";
}
q:lang(en)::after{
content: " (English) ";
}
q:lang(fr)::after{
content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
content: " (Unrecognized language) ";
}
টিএল; ডিআর
সিউডো-ক্লাসগুলি নির্বাচকদের ক্রম অনুসারে সাধারণ নির্বাচক হিসাবে কাজ করে এবং এর ফলে অ-উপস্থাপিত বৈশিষ্ট্যের উপর উপাদানগুলিকে শ্রেণিবদ্ধ করে, সিউডো-উপাদানগুলি নতুন ভার্চুয়াল উপাদান তৈরি করে।
তথ্যসূত্র
ডাব্লু 3 সি