সন্তানের উপাদানগুলির উপর নির্ভর করে কোনও উপাদানগুলিতে সিএসএস শৈলী প্রয়োগ করুন

Question

কোনও উপাদানের জন্য সিএসএস শৈলীর সংজ্ঞা দেওয়া কি সম্ভব, যদি কেবলমাত্র ম্যাচিং উপাদানটিতে একটি নির্দিষ্ট উপাদান থাকে (সরাসরি শিশু আইটেম হিসাবে) তবে তা প্রয়োগ করা হয়?

আমি মনে করি এটি একটি উদাহরণ ব্যবহার করে সবচেয়ে ভাল ব্যাখ্যা করা হয়েছে।

দ্রষ্টব্য : আমি এতে কী কী উপাদান রয়েছে তার উপর নির্ভর করে আমি পিতামাতার উপাদানটি স্টাইল করার চেষ্টা করছি ।

<style>
  /* note this is invalid syntax. I'm using the non-existing
   ":containing" pseudo-class to show what I want to achieve. */
  div:containing div.a { border: solid 3px red; }
  div:containing div.b { border: solid 3px blue; }
</style>

<!-- the following div should have a red border because
     if contains a div with class="a" -->
<div>
  <div class="a"></div>
</div>

<!-- the following div should have a blue border -->
<div>
  <div class="b"></div>
</div>

দ্রষ্টব্য 2 : আমি জানি আমি জাভাস্ক্রিপ্ট ব্যবহার করে এটি অর্জন করতে পারি, তবে আমি কেবল বিস্মিত হয়েছিলাম যে কিছু অজানা (আমার কাছে) সিএসএস বৈশিষ্ট্য ব্যবহার করে এটি সম্ভব কিনা।

Comments

আপনি সম্ভবত প্রশ্নটি আপডেট করতে চাইবেন, সম্ভবত জ্বলজ্বলে সাহসী পাঠ্যের সাথে, যে আপনি প্যারেন্ট ডিভকে স্টাইল করার চেষ্টা করছেন, তার বাচ্চাদের নয়। আমি জানি যে তথ্যটি নিজেই প্রশ্নটিতে রয়েছে, তবে আপনি যতক্ষণ না এক টন ভুল উত্তর পেতে চান তা সম্ভবত চেষ্টা করার মতো।

— শেঠ পেট্রি-জনসন

ধন্যবাদ @ শেঠ। আমি প্রশ্নের শিরোনাম এবং পাঠ্যকে উন্নত করার চেষ্টা করেছি। আপনি যদি এখনও মনে করেন না তবে প্রশ্নটি সম্পাদনা করুন।

— এম 4 এন

সম্ভাব্য সদৃশ একটি সিএসএস প্যারেন্ট নির্বাচক আছে?

— জেমস ডোনেলি

এটি সিএসএসে এই ধরণের সমর্থন কেন আদর্শ হতে পারে তার নিখুঁত উদাহরণ: ol < li:nth-child(n+10) { margin-left: 2rem; } ol < li:nth-child(n+100) { margin-left: 3rem; } ol < li:nth-child(n+1000) { margin-left: 4rem; }একটি আদর্শ বিশ্বে এটি অন্তর্ভুক্ত থাকা শিশুদের olসংখ্যার উপর নির্ভরশীলতার liপ্রান্তিকতা বাড়িয়ে তুলবে যাতে বামদিকে মার্জিনটি কেবল তার প্রশস্ত হয় দরকার ছিল।

— জনমার্ক ওয়েবার

Answer 1

আমি যতদূর সচেতন, সন্তানের উপাদানগুলির উপর ভিত্তি করে পিতামাতার উপাদান স্টাইল করা CSS এর কোনও উপলভ্য বৈশিষ্ট্য নয়। আপনার সম্ভবত এটির জন্য স্ক্রিপ্টিং প্রয়োজন।

আপনি যেমন কিছু বলেছিলেন div[div.a]বা div:containing[div.a]যেমন বলেছেন তেমন কিছু করতে পারলে দুর্দান্ত লাগবে তবে এটি সম্ভব নয়।

আপনি jQuery তাকান বিবেচনা করতে পারেন । এর নির্বাচকরা 'সমন্বিত' ধরণের সাথে খুব ভাল কাজ করে work আপনি তার সন্তানের বিষয়বস্তুর উপর ভিত্তি করে ডিভটি নির্বাচন করতে পারেন এবং তারপরে সমস্ত লাইনে সিএসএস ক্লাস প্রয়োগ করতে পারেন।

আপনি যদি jQuery ব্যবহার করেন তবে এর লাইন বরাবর কিছু কাজ করতে পারে (অনির্ধারিত তবে তত্ত্বটি রয়েছে):

$('div:has(div.a)').css('border', '1px solid red');

অথবা

$('div:has(div.a)').addClass('redBorder');

একটি সিএসএস শ্রেণীর সাথে মিলিত:

.redBorder
{
    border: 1px solid red;
}

এখানে jQuery এর জন্য ডকুমেন্টেশন রয়েছে "নির্বাচক" ।

Comments

পার্শ্ব দ্রষ্টব্য: উন্নত পারফরম্যান্সের জন্য, :hasনির্বাচকদের জন্য jQuery ডক পৃষ্ঠাটি .has()পদ্ধতি ব্যবহারের পরামর্শ দেয় ( api.jquery.com/has ) => বর্তমান প্রশ্নের ক্ষেত্রে এটি প্রয়োগ করা উদাহরণস্বরূপ$('div').has('div.a').css('border', '1px solid red');

— ফ্রস্টি জেড

এটি কাজ করার জন্য একজনকে মিউটেশন পর্যবেক্ষক ব্যবহার করতে হবে, বাচ্চাটির অবস্থা পরিবর্তিত হয়েছে কিনা তা পরীক্ষা করতে হবে ...

— কিংবদন্তি

এটি "CSS এর সাথে এটি করার কোনও উপায় আছে" এমন প্রশ্নের সত্যই উত্তর দেয় না। এটি পরিষ্কারভাবে বলেছে: "আমি জানি আমি জাভাস্ক্রিপ্ট ব্যবহার করে এটি অর্জন করতে পারি, তবে আমি কেবল বিস্মিত হয়েছিলাম যে কিছু অজানা (আমার কাছে) সিএসএস বৈশিষ্ট্য ব্যবহার করে এটি সম্ভব কিনা"।

— সানশিনিডাইল ২

বিকাশকারী.মোজিলা.আর.ইন-:has ইউএস / ডকস / ওয়েবে / সিএসএস /: এ , আমি মনে করি এই নির্বাচক কাজ করতে পারে তবে এটি খসড়া সংস্করণে রয়েছে এবং কোনও ব্রাউজার এটি সমর্থন করে না।

— AliF50

Answer 2

মূলত, না। নিম্নলিখিত হবে হতে আপনি তত্ত্ব পরে কি ছিল:

div.a < div { border: solid 3px red; }

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

"কেন এমন নয়" এর পাতায় কয়েকটি লেখার ব্যবস্থা রয়েছে। শন ইনমানের একটি ভালভাবে সাজানো খুব ভাল:

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors

Comments

মাত্র 8 বছর পরে একটি আপডেট: এই নির্বাচক পদ্ধতির জন্য এখনও কোনও সমর্থন নেই।

— ক্রাং প্রাইম

:has()সিউডো-শ্রেণির আকারে এই বৈশিষ্ট্যের জন্য একটি কার্যকরী খসড়া রয়েছে তবে আমরা কেবল এটি CSS4 এ ব্যবহার করতে পারব। এখন (2019 সালের শেষের দিকে), জেএস এখনও এই কার্যকারিতাটি অর্জনের একমাত্র উপায়।

— zepp.lee

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

— জাস্টিন উইগনল

9 বছর এবং তারা কি এই বৈশিষ্ট্যটি অহেতুক বলে মনে করে?

— লুই এনগুইন হুইন

Answer 3

@ কেপির উত্তরের উপরে:

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

তবে পিতামাতাকে সংশোধন করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করার পরিবর্তে, আমি মনে করি যে আমি গতিশীলভাবে পিতামাতায় একটি সিএসএস ক্লাস যুক্ত করব এবং সিএসএস-বেছে বেছে বাচ্চাদের দেখাব। এটি সিএসএসের ভিত্তিতে নয়, যুক্তিতে সিদ্ধান্তগুলি বজায় রাখবে ।

TL; ড; আবেদন aএবং bঊর্ধ্বতন শৈলী <div>, না শিশু (অবশ্যই, না সবাই এই কাজ করতে সক্ষম হবে। অর্থাত কৌণিক তাদের নিজস্ব সিদ্ধান্ত উপাদান)।

<style>
  .parent            { height: 50px; }
  .parent div        { display: none; }
  .with-children     { height: 100px; }
  .with-children div { display: block; }
</style>

<div class="parent">
  <div>child</div>
</div>

<script>
  // to show the children
  $('.parent').addClass('with-children');
</script>

Answer 4

আমার ক্ষেত্রে, আমাকে এমন কোনও উপাদানটির সেল প্যাডিং পরিবর্তন করতে হয়েছিল যাতে একটি টেবিলের জন্য একটি ইনপুট চেকবাক্স থাকে যা ডেটেটিবেবলগুলির সাথে গতিশীলভাবে রেন্ডার করা হয়:

<td class="dt-center">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

নিখরচায় ফাংশনটির মধ্যে নিম্নলিখিত লাইন কোডটি প্রয়োগ করার পরে আমি সঠিক প্যাডিং উত্পাদন করতে সক্ষম হয়েছি, যা সারিগুলিকে অস্বাভাবিক বড় উচ্চতার সাথে প্রদর্শিত হতে স্থির করেছিল

 $('tbody td:has(input.a)').css('padding', '0px');

এখন, আপনি দেখতে পারেন যে সঠিক শৈলীগুলি পিতামণ্ডলের উপাদানটিতে প্রয়োগ করা হচ্ছে:

<td class=" dt-center" style="padding: 0px;">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

মূলত, এই উত্তরটি @ কেপির উত্তরের একটি বর্ধন, তবে এটি বাস্তবায়নের আরও সহযোগিতা আরও ভাল। সংক্ষেপে, আমি আশা করি এটি অন্য কাউকে সাহায্য করবে কারণ এটি কাজ করে! শেষ অবধি, আমাকে সঠিক দিকনির্দেশনা দেওয়ার জন্য @ কেপি আপনাকে অনেক ধন্যবাদ!