অন্য উপাদানগুলির পরে প্রথম সংঘটিত উপাদান নির্বাচন করুন

113

আমি একটি পৃষ্ঠায় নিম্নলিখিত HTML কোড পেয়েছি:

<h4>Some text</h4>
<p>
Some more text!
</p>

আমার মধ্যে .cssআমি h4উপাদানটি স্টাইল করতে নিম্নলিখিত নির্বাচক পেয়েছি । উপরের এইচটিএমএল কোডটি পুরো কোডের একটি ছোট্ট অংশ; divশ্যাডবক্সের সাথে সম্পর্কিত আরও বেশ কয়েকটি গুলি জড়িত রয়েছে:

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
    color               : #614E43;
    margin-top          : 5px;
    margin-left         : 6px;
}

সুতরাং, আমার h4উপাদানটির জন্য আমার কাছে সঠিক শৈলী রয়েছে তবে আমি pআমার এইচটিএমএলে ট্যাগটিও স্টাইল করতে চাই ।

সিএসএস-নির্বাচকদের দ্বারা এটি কি সম্ভব? এবং যদি হ্যাঁ, আমি এটি কিভাবে করতে পারি?

html css css-selectors

— হরণ করা
সূত্র

199

#many .more.selectors h4 + p { ... }

একে সংলগ্ন ভাইবোন নির্বাচক বলা হয় ।

— Phrogz
সূত্র

1

বিকল্প হ'ল আপনার h4উপাদানগুলি সন্ধানের জন্য জেএস ব্যবহার করা, পরের ভাইবোনটিতে হাঁটা এবং এতে একটি সিএসএস ক্লাস যুক্ত করা। JQuery সহ, এটি সহজভাবে হবে$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');

— ফ্রোগজ

2

নোট করুন যে এটি কেবলমাত্র তাত্ক্ষণিকভাবে নিম্নলিখিত উপাদানগুলিতে কাজ করে। আপনি যদি দ্বিতীয় পরবর্তী এইচটিএমএল উপাদানটি পেতে চান তবে আপনি এটির মতো চেইন করতে পারেন: # সিলেক্টর .রিজিনাল + এইচ 4 + পি একটি .4 অরিজিনাল উপাদান অনুসরণ করে এইচ 4 অনুসরণ করে পি পেতে। খুব দরকারী

— ব্যবহারকারী 1610743

30

আপনার আক্ষরিক উদাহরণের জন্য আপনি সংলগ্ন নির্বাচক (+) ব্যবহার করতে চান।

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

তবে, আপনি যদি ধারাবাহিকভাবে সমস্ত অনুচ্ছেদ নির্বাচন করতে চান তবে আপনাকে সাধারণ ভাইবাল নির্বাচক (~) ব্যবহার করতে হবে।

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

দুর্ভাগ্যক্রমে এটি IE 7+ এ বগী হিসাবে পরিচিত ।

— জোয়েল মেলন
সূত্র

16

এই ধরণের জিনিসটি আমার নিজের থেকে সমাধান করার চেষ্টা করার সময় কেবল এতে আঘাত করুন।

আমি এমন একটি নির্বাচক করেছি যা পি ছাড়া অন্য কিছু হওয়ার পরে উপাদানটির সাথে কাজ করে।

.here .is.the #selector h4 + * {...}

আশা করি এটি যে কেউ এটির জন্য সহায়তা করবে :)

— টম
সূত্র

9

*শিরোনামে বর্ণিত হিসাবে কোনও উপাদান মেলে ব্যবহার করে । আমার জন্য সহায়ক অনুস্মারক ছিল।

— জেমস ই জে

1

এই প্রশ্নের একমাত্র উত্তর যা ফিট করে। অন্যান্য উত্তরের পূর্ববর্তী উপাদানগুলির ধরণ সম্পর্কে পূর্ববর্তী জ্ঞান প্রয়োজন।

— হুগো উইজেডেভেল্ড

0

ভিক্ষুকদের জন্য সহজভাবে:

যদি আপনি অন্য উপাদানগুলির পরে কোনও উপাদান তাত্ক্ষণিকভাবে নির্বাচন করতে চান তবে আপনি +নির্বাচকটি ব্যবহার করেন ।

উদাহরণ স্বরূপ:

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

আপনি যদি নির্বাচকদের সম্পর্কে আরও জানতে চান তবে এই টেবিলটি ব্যবহার করুন

— Trooller
সূত্র

0

আমি সর্বশেষ সিএসএস ব্যবহার করি এবং "+" আমার পক্ষে কাজ করে না তাই আমি শেষ করে দিয়েছি

:প্রথম সন্তান

— VNicholson
সূত্র