"~" (টিল্ড / স্কুইগল / ট্যুইলড) সিএসএস নির্বাচক বলতে কী বোঝায়?

Question

খুঁজছেন ~চরিত্র সহজ নয়। আমি কিছু সিএসএসের সন্ধান করছিলাম এবং এটি পেয়েছি

.check:checked ~ .content {
}

এর মানে কী?

Comments

আপনি যে ডেমোটি বুঝতে পারবেন তা পরীক্ষা করুন এখানে সিএসএস নির্বাচকদের একটি তালিকা রয়েছে

— দিপাক

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

— আর্সেন খাচাতুরিয়ান

@ আরসেনখাচাতুরিয়ান সম্ভবত আপনি ভুল বুঝতে পারেন; ব্লক কোট সিনট্যাক্স একটি উদ্ধৃতি ইঙ্গিত করার জন্য , যা যখন কোনও ব্যবহারকারী কোনও জিনিস (পাঠ্য, একটি চিত্র, কোড ইত্যাদি) নির্দেশ করে থাকে তখন তাদের নিজস্ব কাজ বা শব্দ নয়, তবে অন্য কোথাও থেকে অনুলিপি করা হয়। সমস্ত ফর্ম্যাটিংয়ের মতো এটিরও একটি অর্থপূর্ণ উদ্দেশ্য রয়েছে; এটি উইলি-নিলি যুক্ত করার মতো কিছু নয়। তেমনি, দয়া করে শব্দগুলিতে এলোমেলোভাবে গা bold় হাইলাইট যুক্ত করবেন না । অল্প পরিমাণে এটি জোরের জন্য ব্যবহার করা উচিত।

— টাইলারএইচ

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

— আর্সেন খাচাতুরিয়ান

@ আরসেনখাচাতুরিয়ান দয়া করে এটি করবেন না। >এটি কেবল উদ্ধৃতিগুলির জন্য , এটি অন্য কোনও উদ্দেশ্যে কখনও ব্যবহার করা হবে না । আপনার প্রশ্নের মধ্যে এলোমেলো প্রযুক্তির গা bold় নামও দেওয়া উচিত নয়। ট্যাগগুলির মাধ্যমে কোন প্রযুক্তিগুলি প্রাসঙ্গিক তা আমরা দেখতে পারি।

— মেগার

Answer 1

~নির্বাচক আসলে সাধারণ সহোদর combinator (ইন পরবর্তী-সহোদর combinator নাম পালটে নির্বাচকরা শ্রেনী 4 ):

সাধারণ ভাইবিলিং কম্বিনেটরটি "টিলডে" (U + 007E, ~) অক্ষর দ্বারা তৈরি যা সাধারণ নির্বাচকদের দুটি ক্রমকে পৃথক করে। দুটি সিকোয়েন্স দ্বারা উপস্থাপিত উপাদানগুলি নথির গাছের মধ্যে একই পিতামাতাকে ভাগ করে এবং দ্বিতীয় ক্রম দ্বারা প্রতিনিধিত্ব করা উপাদানটি প্রথম সিকোয়েন্সের পূর্বে (তাত্ক্ষণিকভাবে অবিলম্বে নয়) প্রতিনিধিত্ব করে।

নিম্নলিখিত উদাহরণ বিবেচনা করুন:

.a ~ .b {
  background-color: powderblue;
}

<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

.a ~ .b চতুর্থ এবং 5 ম তালিকার আইটেমটির সাথে মেলে কারণ তারা:

• হয় .bউপাদান
• এর ভাইবোনেরা .a
• .aএইচটিএমএল উত্স ক্রম পরে প্রদর্শিত হবে ।

তেমনি, .check:checked ~ .contentসমস্ত .contentউপাদানগুলির সাথে মেলে যা ভাইবোন .check:checkedএবং এর পরে প্রদর্শিত হয়।

Comments

"অবিলম্বে তাত্ক্ষণিকভাবে নয়" এই বর্ণনার মূল অংশ।

— PanicBus

একই প্যারেন্ট সহ সমস্ত উপাদানগুলির জন্যও কি নির্বাচক রয়েছে?

— নিক এন।

@NickN। মানে .parent > *?

— সালমান এ

@ সালমানআ ঠিক ঠিক নয়, আমি আশা করছিলাম এমন একজন নির্বাচক আছেন যা আপনি ব্যবহার করতে পারবেন, যদি আপনি পিতামাতাকে না জানেন।

— নিক এন।

@ নিকন.নোন নেই। সিএসএস এই প্রস্তাবটি দিয়ে তৈরি করা হয় যে সিএসএস পার্সার কোনও ম্যাচ তৈরি করতে কখনই ডিওমে পিছনে ফিরে তাকাবে না। প্যারেন্ট সিলেক্টর নেই এমন কারণেই।

— ইউনজেন

Answer 2

পরিবারের অন্যান্য সংযোগকারীদেরও পরীক্ষা করে দেখতে এবং এই নির্দিষ্টটি থেকে ফিরে আসা ভাল।

• ul li
• ul > li
• ul + ul
• ul ~ ul

উদাহরণ চেকলিস্ট:

• ul li- ভিতরে খুঁজছি - নির্বাচন সবli উপাদান স্থাপন (যে কোন জায়গায়) ভিতরে ul; বংশোদ্ভূত নির্বাচক
• ul > li- ভিতরে খুঁজছেন - কেবল প্রত্যক্ষ li উপাদান নির্বাচন করুন ul; অর্থাৎ এটি শুধুমাত্র সরাসরি শিশুদের নির্বাচন করব liএর ul; শিশু নির্বাচনকারী বা শিশু সমন্বয়কারী নির্বাচক
• ul + ul- বাইরে খুঁজছেন - ulঅবিলম্বে নিম্নলিখিত নির্বাচন করে ul; এটি ভিতরে খুঁজছেন না, তবে অবিলম্বে নিম্নলিখিত উপাদানগুলির জন্য বাইরে খুঁজছেন; সংলগ্ন ভাইবোন নির্বাচনকারী
• ul ~ ul- বাহিরে সন্ধান করা - সমস্ত যেখানে ulসেগুলি অনুসরণ করে যা নির্বাচন করে সেখানে নির্বাচন ulকরে না, তবে উভয়েরই ulএকই পিতামাতার হওয়া উচিত; জেনারেল সিলিং সিলেক্টর

---

আমরা এখানে যা খুঁজছি সে হ'ল জেনারেল সিলিং সিলেক্টর

Comments

এই এক সর্বাধিক অর্থে তৈরি। আবার উদ্ধারের জন্য লেম্যানের পরিভাষা। এখন আমি প্রযুক্তিগত ডকুমেন্টেশন পড়তে পারি।

— TheRealChx101

সমস্ত ভাইবোনদের জন্য কি কোনও ভাইবোন নির্বাচক রয়েছে, যারা কেবল অনুসরণ করে?

— এলি দ্য হিউম্যান ২

@ এলিহুমান, না আরও তথ্যের জন্য দয়া করে এই এসও পোস্টটি দেখুন - stackoverflow.com/a/11813469/6830901

— লিজো জোসেফ

Answer 3

জেনারেল ভাইবিলিং কম্বিনেটর

জেনারেল ভাইবিলিং কম্বিনেটর সিলেক্টর সংলগ্ন ভাইবিলিং কম্বিনেটর সিলেক্টরের সাথে খুব মিল। পার্থক্যটি হ'ল যে উপাদানটি নির্বাচিত হচ্ছে তা অবিলম্বে প্রথম উপাদানটিকে সফল করার দরকার নেই, তবে এর পরে যে কোনও জায়গায় উপস্থিত হতে পারে।

অধিক তথ্য

Answer 4

এটি General sibling combinator@ সালামানের উত্তরে খুব ভালভাবে ব্যাখ্যা করা হয়েছে এবং ব্যাখ্যা করা হয়েছে।

আমি Adjacent sibling combinatorযা মিস করি তা হ'ল যা এর +সাথে নিবিড়ভাবে সম্পর্কিত ~।

উদাহরণ হবে

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

• যে উপাদানগুলির সাথে মেলে .b
• সংলগ্ন হয় .a
• .aএইচটিএমএল পরে

উপরে উদাহরণস্বরূপ এটি ২ য় চিহ্নিত হবে liতবে চতুর্থ নয়।

   .a + .b {
     background-color: #ff0000;
   }

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

JSFiddle

Answer 5

নোট করুন যে একটি বৈশিষ্ট্য নির্বাচক (যেমন, [attr~=value]), টিল্ড de

অ্যাটারের একটি গুণবাচক নাম সহ এমন একটি উপাদানকে উপস্থাপন করে যার মান শ্বেত স্পেস-বিচ্ছিন্ন শব্দের তালিকা, যার একটি হুবহু মান ।

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors