না। এটি সিএসএসের মাধ্যমে সম্ভব নয়। এটি "ক্যাসকেড" হৃদয়ে নিয়ে যায় ;-)।
তবে আপনি যদি নিজের পৃষ্ঠাতে জাভাস্ক্রিপ্ট যুক্ত করতে সক্ষম হন তবে কিছুটা jQuery আপনাকে আপনার শেষ লক্ষ্যে পৌঁছে দিতে পারে।
আপনি findআপনার টার্গেট এলিমেন্ট / ক্লাস / আইডিতে "লুক-ফরোয়ার্ড" সম্পাদন করতে jQuery গুলি ব্যবহার করতে পারেন , তারপরে আপনার লক্ষ্য নির্বাচন করতে ব্যাকট্র্যাক করুন।
তারপরে আপনি আপনার উপাদানটির জন্য ডওএম (সিএসএস) পুনরায় লেখার জন্য jQuery ব্যবহার করেন।
মাইক ব্রেন্টের এই উত্তরের ভিত্তিতে , নীচের jQuery স্নিপেট সাহায্য করতে পারে।
$('p + ul').prev('p')
এটি প্রথমে সমস্তগুলি নির্বাচন করে <ul>যা তত্ক্ষণাত্ অনুসরণ করে <p>।
তারপরে এটির " <p>সেট " থেকে পূর্ববর্তী সমস্তগুলি নির্বাচন করা "ব্যাকট্র্যাকস" <ul>।
কার্যকরভাবে, jQuery এর মাধ্যমে "পূর্ববর্তী ভাইবোন" নির্বাচন করা হয়েছে।
এখন, .cssসেই উপাদানটির জন্য আপনার সিএসএসের নতুন মানগুলিতে পাস করতে ফাংশনটি ব্যবহার করুন ।
আমার ক্ষেত্রে আমি আইডি দিয়ে একটি ডিআইভি নির্বাচন করার উপায় খুঁজছিলাম #full-width, তবে কেবলমাত্র এর শ্রেণীর সাথে যদি কোনও (অপ্রত্যক্ষ) বংশধর ডিআইভি থাকত .companies।
আমার অধীনে সমস্ত এইচটিএমএল নিয়ন্ত্রণ ছিল .companies, কিন্তু উপরে এইচটিএমএল কোনও পরিবর্তন করতে পারে না।
এবং ক্যাসকেডটি কেবল 1 টি দিক: নীচে।
সুতরাং আমি সব #full-widthগুলি নির্বাচন করতে পারে ।
বা আমি নির্বাচন .companiesকরতে পারে যে শুধুমাত্র একটি অনুসরণ #full-width।
কিন্তু আমি পারতাম না শুধুমাত্র নির্বাচন #full-widthযে গুলি রইল .companies ।
এবং আবারও, আমি যুক্ত করতে অক্ষম ছিল .companies এইচটিএমএলে কোনও উচ্চতর । এইচটিএমএলের সেই অংশটি বাহ্যিকভাবে লেখা হয়েছিল এবং আমাদের কোডটি মোড়ানো ছিল।
তবে jQuery এর সাহায্যে আমি প্রয়োজনীয় গুলি নির্বাচন করতে পারি #full-width, তারপরে উপযুক্ত স্টাইলটি নির্ধারণ করতে পারি:
$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );
এটি সমস্তটি সন্ধান করে এবং সিএসএসের স্ট্যান্ডার্ডে নির্দিষ্ট উপাদানগুলিকে লক্ষ্য করতে নির্বাচকরা কীভাবে ব্যবহৃত হয় তার অনুরূপ #full-width .companiesকেবল সেগুলিই নির্বাচন .companiesকরে।
তারপরে এটি .parents"ব্যাকট্র্যাক" ব্যবহার করে এবং এর সমস্ত পিতামাতাকে নির্বাচন করে .companies,
তবে কেবলমাত্র #fill-widthউপাদানগুলি রাখতে এই ফলাফলগুলি ফিল্টার করে , যাতে শেষ পর্যন্ত,
এটি কেবলমাত্র একটি #full-widthউপাদান নির্বাচন করে যদি এটির .companiesশ্রেণি বংশধর থাকে।
অবশেষে, এটি widthফলাফলের উপাদানকে একটি নতুন সিএসএস ( ) মূল্য দেয়।
$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");
div {
background-color: lightblue;
width: 120px;
height: 40px;
border: 1px solid gray;
padding: 5px;
}
.wrapper {
background-color: blue;
width: 250px;
height: 165px;
}
.parent {
background-color: green;
width: 200px;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">
<div class="parent">
"parent" turns red
<div class="change-parent">
descendant: "change-parent"
</div>
</div>
<div class="parent">
"parent" stays green
<div class="nope">
descendant: "nope"
</div>
</div>
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>
jQuery রেফারেন্স ডক্স:
$ () বা jQuery () : DOM উপাদান।
। সন্ধান করুন : নির্বাচক, জিকুয়েরি বস্তু বা উপাদান দ্বারা ফিল্টার করা মেলানো উপাদানগুলির বর্তমান সেটে প্রতিটি উপাদানের বংশধরকে পান।
। পিতামাতা : মিলিত উপাদানগুলির সেটে প্রতিটি উপাদানটির তাত্ক্ষণিক পূর্ববর্তী ভাইবাল পান Get যদি কোনও নির্বাচক সরবরাহ করা হয় তবে এটি পূর্ববর্তী ভাইবোনগুলি কেবল তখনই পুনরুদ্ধার করে যদি এটি কোনও নির্বাচকের সাথে মেলে (ফলাফলগুলি কেবলমাত্র তালিকাভুক্ত উপাদান / নির্বাচনকারীদের অন্তর্ভুক্ত করতে ফিল্টার করে)।
। সিএসএস : মিলিত উপাদানগুলির সেটের জন্য এক বা একাধিক সিএসএস বৈশিষ্ট্য সেট করুন।