নির্বাচকদের ডিভ + পি (প্লাস) এবং ডিভ ~ পি (টিল্ড) এর মধ্যে পার্থক্য

Question

যেভাবে ডাব্লু 3 স্কুল এটির শব্দগুচ্ছ করে, তারা একই শব্দ করে।

ডাব্লু 3 স্কুলগুলির সিএসএস রেফারেন্স

div + p
<p>উপাদানগুলির সাথে সাথে স্থাপন করা সমস্ত উপাদান নির্বাচন <div>করে

div ~ p
<p>কোনও <div>উপাদান দ্বারা পূর্বে থাকা প্রতিটি উপাদান নির্বাচন করে

যদি কোনও <p>উপাদান কোনও মৌলের সাথে সাথে হয় <div>, তবে এর অর্থ এই নয় যে <p>উপাদানটি একটি <div>মৌলটির আগে রয়েছে ?

যাইহোক, আমি এমন একজন নির্বাচককে খুঁজছি যেখানে আমি কোনও নির্দিষ্ট উপাদানটির আগেই উপস্থিত একটি উপাদান নির্বাচন করতে পারি ।

Comments

+অবিলম্বে পরবর্তী pউপাদান এবং ~হয় সব পরের p(প্রতিটি পর উপাদানের divউপাদান)

— VSync

আপনি করতে পারবেন না before। অসম্ভব। শুধুমাত্র জাভাস্ক্রিপ্ট সহ। আপনার সিএসএসে লক্ষ্য করার জন্য আপনাকে এটি এবং এটির জন্য সমস্ত beforeশ্রেণীর সন্ধান করতে হবে।

— vsync

W3schools

— অ্যালেক্স চার

দেখুন এই একটি চাক্ষুষ ব্যাখ্যা জন্য

— মার্ক বি

এই প্রশ্ন সম্পর্কে একটি আকর্ষণীয় বিষয় এটি আগে জিজ্ঞাসা করা হয়নি। কমপক্ষে আমি এসও তেমন কোনও অনুরূপ প্রশ্ন পাই না।

— হাশেম কোলামি

Answer 1

সংলগ্ন ভাইবোন নির্বাচকরা এক্স + ওয়াই

সংলগ্ন ভাইবোন নির্বাচনকারীদের নিম্নলিখিত বাক্য গঠন রয়েছে: E1 + E2, যেখানে E2 নির্বাচকটির বিষয়। ই -1 এবং ই 2 নথি গাছের মধ্যে একই পিতামাতাকে ভাগ করে নিলে এবং E1 তত্ক্ষণাত E2 এর আগে নন-এলিমেন্ট নোডগুলি উপেক্ষা করে (যেমন পাঠ্য নোড এবং মন্তব্যগুলি) নির্বাচন করে matches

ul + p {
   color: red;
}

এই উদাহরণে এটি কেবলমাত্র সেই উপাদানটি নির্বাচন করবে যা তাত্ক্ষণিকভাবে পূর্ববর্তী উপাদান দ্বারা প্রস্তুত। এই ক্ষেত্রে, প্রতিটি উলের পরে কেবল প্রথম অনুচ্ছেদে লাল লেখা থাকবে।

ul + p {
    color: red;
}

<div id="container">
    <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
    <p>This will be red</p>
    <p>This will be black</p>
    <p>This will be black</p>
</div>

সাধারণ ভাইবোন নির্বাচকরা এক্স ~ ওয়াই

~ সংযুক্তকারী দুটি নির্বাচককে পৃথক করে এবং দ্বিতীয় উপাদানটির সাথে মেলে তবেই এটির আগে আগে থাকে এবং উভয়ই একটি সাধারণ পিতামাতাকে ভাগ করে দেয়।

ul ~ p {
   color: red;
}

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

ul ~ p {
  color: red;
}

<div id="container">
  <ul>
    <li>List Item
      <ul>
        <li>Child</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
</div>

উৎস

code.tutsplus

সাধারণ ভাইবোন নির্বাচক এমডিএন

সংলগ্ন ভাইবোন নির্বাচকরা ডাব্লু 3

Comments

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

— BoltClock

@ ব্লটক্লক ধন্যবাদ আমি আপনার বক্তব্য পেয়েছি। আমি সবসময় আপনার কাছ থেকে প্রতিক্রিয়া স্বাগত জানাই। তবে আমি মনে করি আমার উত্তরটি ওপিকে বোঝায় যে এই নির্বাচকদের মধ্যে পার্থক্য কী।

— অ্যালেক্স চার

সেটা সত্য. যদিও এটি বেশিরভাগ প্রশ্নের সমাধান করে না, তবে এটি দুটি নির্বাচকদের মধ্যে পার্থক্য তুলে ধরে যুক্তিসঙ্গত কাজ করে।

— BoltClock

@ অ্যালেক্সচার এই দুটির মধ্যে পার্থক্য আরও ভালভাবে দেখানোর জন্য আপনার এক্স + ওয়াই এবং এক্স ~ ওয়াই উভয়ের জন্য একই এইচটিএমএল উদাহরণটি ব্যবহার করা উচিত

— Thecoolmacdude

নিবন্ধন করুন সাহায্য করার জন্য ধন্যবাদ. এখন আমি আরও স্পষ্ট মনে করি।

— অ্যালেক্স চার

Answer 2

যদি কোনও <p>উপাদান কোনও মৌলের সাথে সাথে হয় <div>, তবে এর অর্থ এই নয় যে <p>উপাদানটি একটি <div>মৌলটির আগে রয়েছে ?

এটা সঠিক। অন্য কথায়, div + pএকটি হল উপসেট এর div ~ pসাবেক দ্বারা মেলানো কিছু হয় - এছাড়াও , পরেরটির দ্বারা মেলানো অপরিহার্যতা দ্বারা।

মধ্যে পার্থক্য +এবং ~যে~ যতক্ষণ না তারা উভয়ই একই পিতামাতাকে ভাগ করে নেয় ততক্ষণ প্রথম উপাদান থেকে তাদের নিবিড়তা নির্বিশেষে সমস্ত ভাইবোনদের সাথে মেলে।

এই দুটি পয়েন্টই একক উদাহরণের সাথে সবচেয়ে সংক্ষিপ্তভাবে চিত্রিত, যেখানে প্রতিটি নিয়ম আলাদা আলাদা সম্পত্তি প্রয়োগ করে। লক্ষ্য করুন যে pঅবিলম্বে যেটি অনুসরণ করে divসেটিতে দুটি নিয়মই প্রয়োগ করা হয়েছে:

div + p {
    color: red;
}

div ~ p {
    background-color: yellow;
}

<section>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>
<section>
    No div
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>

যাইহোক, আমি এমন একজন নির্বাচককে খুঁজছি যেখানে আমি কোনও নির্দিষ্ট উপাদানটির আগেই উপস্থিত একটি উপাদান নির্বাচন করতে পারি ।

দুর্ভাগ্যক্রমে, এখনও একটি নেই ।

Answer 3

এই উদাহরণ বিবেচনা করুন:

p + p { /* the first p immediately after a preceding p */
   color: red; 
} 

p ~ p { /* all p's after a preceding p */
   font-weight: bold;
} 

<div>
   	<p>1</p>
	<div>separator</div>
   	<p>2</p> <!-- only ~ is applied here -->
  	<p>3</p> <!-- both + and ~ are applied here -->
</div>

Answer 4

1) সংলগ্ন ভাইবোন নির্বাচক (এস 1 + এস 2)

সংলগ্ন ভাইবিলিং নির্বাচনকারী নির্দিষ্ট উপাদান নির্বাচন করতে ব্যবহৃত হয় যা অন্য নির্দিষ্ট উপাদানের সাথে সাথেই থাকে। উভয় উপাদান একই স্তরের হওয়া উচিত।

div + p {
    color:red;
}

সংলগ্ন ভাইবোন নির্বাচক উদাহরণ

2) সাধারণ ভাইবোন নির্বাচক (এস 1 ~ এস 2)

জেনারেল ভাইবালিং সিলেক্টর অন্য নির্দিষ্ট উপাদানের সমস্ত নির্দিষ্ট ভাইবিল উপাদান নির্বাচন করতে ব্যবহৃত হয়।

div ~ p {
   color:red;
}

সাধারণ ভাইবোলিং নির্বাচক উদাহরণ

সংলগ্ন সিবলিং (এস 1 + এস 2) বনাম জেনারেল সিবিলিং (এস 1 ~ এস 2) নির্বাচক:

সংলগ্ন ভাইবিলিং (এস 1 + এস 2) নির্বাচক কেবলমাত্র তাত্ক্ষণিক ভাইবোনের উপাদান নির্বাচন করে তবে সাধারণ সহোদর (এস 1 ~ এস 2) নির্বাচক অন্য নির্দিষ্ট উপাদানের সমস্ত ভাইবোন উপাদান নির্বাচন করে। উভয় ক্ষেত্রে, উভয় উপাদান (এস 1 এবং এস 2) একই স্তরের হওয়া উচিত।

বাকি নির্বাচকদের এখানে ব্যাখ্যা করা হয়েছে: https://www.csssolid.com/35-css-selectors-to-remember.html