উদাহরণ স্বরূপ:
p + p {
/* Some declarations */
}আমি এর +অর্থ জানি না । এর মধ্যে পার্থক্য কী এবং কেবল pবিনা জন্য একটি শৈলীর সংজ্ঞা দেওয়া + p?
উত্তর:
W3.org- এ সংলগ্ন নির্বাচকগুলি দেখুন ।
এই ক্ষেত্রে, নির্বাচকটির অর্থ হ'ল শৈলীটি কেবলমাত্র অন্য অনুচ্ছেদের অনুসরণ করে অনুচ্ছেদে প্রযোজ্য।
একটি সরল pনির্বাচক পৃষ্ঠার প্রতিটি অনুচ্ছেদে শৈলী প্রয়োগ করবে।
এটি কেবল আই 7 বা তত উপরে কাজ করবে। আই 6 এ স্টাইলটি কোনও উপাদানগুলিতে প্রয়োগ করা হবে না। এটিও সংযুক্তকারীগুলির জন্য যায় >।
ইন্টারনেট এক্সপ্লোরারে সিএসএসের সামঞ্জস্যের জন্য মাইক্রোসফ্টের ওভারভিউটিও দেখুন ।
visibility : hidden/visibleপরিবর্তে ব্যবহার করে display : none/block। এই রেফারেন্স দেখুন ।
p > pবলতে বোঝায় একটি নেস্টেড p, ইআই pযে কোনওটি অন্যের নীচে থাকে pযেমন যেমন <p><p>This paragraph</p></p>।
এটি সংলগ্ন ভাইবোন নির্বাচনকারী
স্টাইল ব্লগ স্প্ল্যাশ থেকে ।
সিএসএস সংলগ্ন নির্বাচককে সংজ্ঞায়িত করতে, প্লাস চিহ্নটি ব্যবহৃত হয়।
h1+p {color:blue;}উপরের সিএসএস কোড কোনও অনুশীলন এইচ 1 শিরোনামকে নীলের পরে (অভ্যন্তরে নয়) পরে প্রথম অনুচ্ছেদে ফর্ম্যাট করবে।
h1>ppযে কোনও উপাদান নির্বাচন করে যা কোনও উপাদানের প্রত্যক্ষ (প্রথম প্রজন্মের) শিশু (ভিতরে) থাকে h1।
h1>pম্যাচ <h1> <p></p> </h1>( <p>ভিতরে <h1>)h1+ppএকটি উপাদান হিসাবে একটি ভাইবোন (ডোম একই স্তরের) প্রথম উপাদানটি নির্বাচন করবে h1।
h1+pম্যাচ <h1></h1> <p><p/>( <p>পরবর্তী / পরবর্তী <h1>)plus signএবং মধ্যে বিভ্রান্ত greater sign। আমি যদি এর h1>pপরিবর্তে ব্যবহার করি h1+pতবে এটি কি আমাকে একই ফলাফল দেয়? আপনি কিছুটা ব্যাখ্যা করতে পারেন যে তাদের মধ্যে কতটা আলাদা?
h1>pকোনও pউপাদান নির্বাচন করুন যা কোনও উপাদানের প্রত্যক্ষ (প্রথম প্রজন্মের) শিশু h1। একটি উপাদান হিসাবে একটি ভাইবোন (ডোম একই স্তরের) h1+pপ্রথম pউপাদানটি নির্বাচন করবে h1। h1>pম্যাচ <h1><p><p></h1>, h1+pম্যাচ<h1></h1><p><p/>
+সংকেতের অর্থ হচ্ছে একটি "সংলগ্ন সহোদর" নির্বাচন করুন
উদাহরণস্বরূপ, এই স্টাইলটি দ্বিতীয় থেকে প্রযোজ্য <p>:
p + p {
font-weight: bold;
} <div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>এই জেএসফিডেলটি দেখুন এবং আপনি এটি বুঝতে পারবেন: http://jsfiddle.net/7c05m7tv/ (অন্য জেএসফিডাল: http://jsfiddle.net/7c05m7tv/70/ )
সংলগ্ন ভাইবোন নির্বাচকরা সমস্ত আধুনিক ব্রাউজারে সমর্থিত।
"+" হ'ল সংলগ্ন সহোদর নির্বাচক। এটি এপি এর পরে যে কোনও পি নির্বাচন করবে (কোনও শিশু বা পিতা বা মাতা নয়, যদিও ভাইবোন)।
+নির্বাচক বলা হয় Adjacent Sibling Selector।
উদাহরণস্বরূপ, নির্বাচক p + p, pউপাদানগুলি অবিলম্বে অনুসরণ করে pউপাদানগুলি নির্বাচন করে
এটি looking outsideনির্বাচক হিসাবে ভাবা যেতে পারে যা অবিলম্বে নিম্নলিখিত উপাদানগুলির জন্য পরীক্ষা করে।
বিষয়গুলি আরও পরিষ্কার করার জন্য এখানে একটি নমুনা স্নিপেট রয়েছে:
body {
font-family: Tahoma;
font-size: 12px;
}
p + p {
margin-left: 10px;
}<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>যেহেতু আমরা একই বিষয়, তাই এটি অন্য নির্বাচক, ~নির্বাচক, যা উল্লেখ করা উচিতGeneral Sibling Selector
উদাহরণস্বরূপ, p ~ pসমস্ত pঅনুসরণ করে যা অনুসরণ pকরে তা যেখানেই আসে তা বিবেচনা করে না, তবে উভয়েরই pএকই পিতামাতার হওয়া উচিত।
একই মার্কআপের সাথে এটি দেখতে কেমন দেখাচ্ছে তা এখানে:
body {
font-family: Tahoma;
font-size: 12px;
}
p ~ p {
margin-left: 10px;
}<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>লক্ষ্য করুন যে pশেষটিও এই নমুনায় মেলে।
এটি pঅবিলম্বে একটি উপাদান 'পি' সংলগ্ন যে কোনও উপাদানটির সাথে মিলবে । দেখুন: http://www.w3.org/TR/CSS2/selector.html
+আপেক্ষিক নির্বাচকদের একজন উপস্থাপন করুন। সমস্ত আপেক্ষিক নির্বাচকদের তালিকা:
div p- <p>উপাদানগুলির মধ্যে থাকা সমস্ত উপাদান <div>নির্বাচন করা হয়।
div > p- সমস্ত <p>উপাদান যাদের প্রত্যক্ষ পিতা বা মাতা <div>নির্বাচিত। এটি খুব পিছিয়ে কাজ করে ( p < div)
div + p- উপাদান নির্বাচিত <p>হওয়ার সাথে সাথে সমস্ত উপাদান স্থান দেয় <div>।
div ~ p- <p>উপাদান দ্বারা পূর্ববর্তী সমস্ত উপাদান <div>নির্বাচন করা হয়।
নির্বাচক সম্পর্কে আরও চেক এখানে ।
p+p{
//styling the code
}
p+p{
} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.
<div>
<input type="text" placeholder="something">
<p>This is first paragraph</p>
<button>Button </button>
<p> This is second paragraph</p>
<p>This is third paragraph</p>
</div>
Styling part
<style type="text/css">
p+p{
color: red;
font-weight: bolder;
}
</style>
It will style all sibling paragraph with red color.চূড়ান্ত আউটপুট এই মত চেহারা
প্লাস (+) প্রথম তাত্ক্ষণিক উপাদান নির্বাচন করবে। আপনি যখন + নির্বাচক ব্যবহার করেন তখন আপনাকে দুটি প্যারামিটার দিতে হবে। এটি উদাহরণস্বরূপ আরও স্পষ্ট হবে: এখানে ডিভ এবং স্প্যানটি প্যারামিটার রয়েছে, সুতরাং এক্ষেত্রে ডিভের পরে প্রথম স্প্যানটি স্টাইল করা হবে।
div+ span{
color: green;
padding :100px;
}
<div>The top or first element </div>
<span >this is span immediately after div, this will be selected</span>
<span>This will not be selected</span>উপরের স্টাইলটি ডিভের পরে কেবল প্রথম স্প্যানে প্রযোজ্য হবে। এটি লক্ষ্য করা গুরুত্বপূর্ণ যে দ্বিতীয় স্প্যানটি নির্বাচন করা হবে না।
এর অর্থ এটি pতাত্ক্ষণিকভাবে সংলগ্ন প্রতিটি উপাদানগুলির সাথে মেলে
www.snoopcode.com/css/examples/css-adjacent-sibling-selector