একটি ট্যাগের জন্য নির্বাচক সরাসরি অন্য ট্যাগের পরে

Question

এটি <B>সরাসরি ট্যাগগুলির আগে সমস্ত ট্যাগ নির্বাচন করে <A>:

A+B {
    /* styling */
}

<A>সরাসরি ট্যাগ দ্বারা অনুসরণ করা সমস্ত ট্যাগগুলির জন্য নির্বাচক কী <B>?

এখানে আমার প্রশ্নের সাথে মানানসই নমুনা দেওয়া হয়েছে:

<a>some text</a>
<b>some text</b>

Comments

পীজ আমাদের একটি ডোম উদাহরণ দেয় Aএবং কীভাবে Bতা সম্পর্কিত।

— গম্বো

তারা যে তারা ভাইবোন হয় সম্পর্কিত হয়, এবং B অনুসরণ করা হয় দ্বারা উ: ওপি সব নির্বাচন করতে চায় bগুলি যার দ্বারা অনুসরণ করা হয় aএস, অনুরূপ a+bতোমাদের সকলের যেখানে নির্বাচন করতে পারেন bগুলি সরাসরি পূর্বে করছে a।

— অ্যান্টনি

আড়াই বছর পরে, এই উত্তরের কোনও আপডেট আছে? আমি বি অনুসরণ করে একটি লক্ষ্য করতে চাই।

— chovy

Answer 1

আপনি CSS এ পারবেন না

সম্পাদনা: কিছুটা বেশি সহায়ক হওয়ার জন্য, আপনি উদাহরণস্বরূপ jQuery (একটি জাভাস্ক্রিপ্ট লাইব্রেরি) ব্যবহার করেন, আপনি ব্যবহার করতে পারেন .prev()।

Comments

এটি জাভাস্ক্রিপ্ট ব্যবহারের একমাত্র সমাধানটির

— সীলমোহর

ধন্যবাদ জিরোইন! এটা আমার সমস্যা স্থির। যেহেতু আমার "এ" বামে এবং "বি" ডান দিকে

— ভাসছে

Answer 2

আপনি কি এটিকে স্টাইল করার অর্থ দিয়েছিলেন যে এর ভিতরে সরাসরি বি উপাদান রয়েছে বা অনুসরণ করা হচ্ছে? এটার মত:

<A>
    <B>
    </B>
</A>

// OR

<A>
</A>
<B>
</B>

আপনি সিএসএসে (এখনও) এমন কাজ করতে পারবেন না। এরিক মায়ার বলেছেন যে এই ধরণের নির্বাচক সিএসএস মেলিং তালিকায় বেশ কয়েকবার আলোচনা হয়েছে, এবং তা সম্ভব নয়। মূল ওয়েবকিট বিকাশকারীদের একজন ডেভ হায়াট কেন এটি করা যায় না তার একটি ভাল ব্যাখ্যা সহ মন্তব্য করেছেন।

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

Comments

আমি দ্বিতীয়টি বোঝাতে চাইছি, বিষয়টি বুঝতে পারছি আপনাকে ধন্যবাদ ধন্যবাদ :)

— মোস্তফা ফারগালি

Answer 3

আপনি কেবল কথোপকথনটি করতে পারেন: এটি ট্যাগ দ্বারা সরাসরি পূর্ববর্তী সমস্ত ট্যাগ নির্বাচন করে।

এটি যৌক্তিকভাবে আপনার অনুরোধের সমতুল্য।

আমি প্রায়শই লেবেলযুক্ত অনেকগুলি চেকবক্সের সারি স্টাইল করতে এটি ব্যবহার করি

সিএসএস:

label+input {
    margin-left: 4px;
}

ডোম:

<input id="a" name="a" type="checkbox"/><label for="a">...</label>
<input id="b" name="b" type="checkbox"/><label for="b">...</label>
<input id="c" name="c" type="checkbox"/><label for="c">...</label>

Comments

আমার মনে হয় আপনি সিএসএসে "ইনপুট + লেবেল" টাইপ করতে চেয়েছিলেন যাতে মার্জিন-বাম লেবেলে প্রয়োগ হয়।

— সিএকে 2

@ সিএকে ২ - আমি মনে করি তিনি এটিকে সঠিক বলেছিলেন। এমনটি করে label+inputমার্জিন সব প্রয়োগ করা হয় inputউপাদান দ্বিতীয় থেকে শুরু । এটি তাদের মধ্যে জায়গা তৈরির একটি সৃজনশীল উপায় তবে শুরুতে বা সারির শেষে নয়। এই ক্ষেত্রে এটি সমতুল্য input:not(:first-child)।

— ডেভিড

Answer 4

যদিও এটি খুব সহজ নয়, আজকাল আপনি এইচটিএমএল তৈরি করার সময় এবং সিএসএস বিধি প্রয়োগ করে উভয়ই আপনার উপাদানগুলির ক্রমকে বিপরীত করে এই আচরণটি অর্জন করতে পারেন: display: flexএবংflex-direction: column-reverse

ul {
  display: flex;
  flex-direction: column-reverse;
}

.b ~ .a {
  color: red;
}

<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>

এছাড়াও, আপনার যদি 2 বা ততোধিক ইনলাইন উপাদান থাকে তবে আপনি প্রয়োগ করে এটি অর্জন করতে পারেন float: right, কারণ সেগুলি বিপরীত ক্রমে প্রদর্শিত হবে:

ul {
  float: left;
  list-style-type: none;
}

li {
  float: right;
}

li:not(:first-child) {
  margin-right: 20px;
}

.b ~ .a {
  color: red;
}

<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>