সিএসএসে সিলেক্টারের জন্য পরবর্তী উপাদানগুলির জন্য সিনট্যাক্স কী?

Question

আমার যদি একটি শিরোনাম ট্যাগ থাকে <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

এবং তার পরে আমার একটি অনুচ্ছেদ রয়েছে <p>stuff here</p>।

আমি কীভাবে সিএসএস ব্যবহার নিশ্চিত করতে পারি যে প্রতিটি <p>ট্যাগ যা h1.hc-reformব্যবহার করতে অনুসরণ করে :clear:both;

এটা কি:

h1.hc-reform > p{
     clear:both;
}

কিছু কারণে যে কাজ করছে না।

Answer 1

একে সংলগ্ন ভাইবোন নির্বাচক বলা হয় এবং এটি প্লাস চিহ্ন দ্বারা উপস্থাপিত হয় ...

h1.hc-reform + p {
  clear:both;
}

দ্রষ্টব্য: এটি আই 6 বা তার চেয়ে বেশি পুরানোতে সমর্থিত নয়।

Comments

এটি pকেবলমাত্র পরে আসবে তা নির্বাচন করবে h1.hc-reform। তারপরে আবার এটি হতে পারে কেবলমাত্র clear: bothএটির কাজ করার জন্য এটি প্রয়োগ করা দরকার কারণ এটি কেবল ভাসাটি পরিষ্কার করে h1, তাই এটি এখনও একটি বৈধ উত্তর।

— বোলটলক

@ বল্টক্লক হ্যাঁ আপনি সঠিক, আমি অনুমানটি ভুলভাবে পড়েছি এবং সেই মন্তব্যটি মুছে ফেলেছি কারণ এটি ভুল ছিল। এই নির্বাচক কেবলমাত্র pতারপরে তত্ক্ষণাত মিলবে h1.hc-reform(অবশ্যই একই প্যারেন্ট উপাদান সহ) with

— জোশ স্টোডোলা

বাহ সংলগ্ন ভাইবোন নির্বাচক সম্পর্কে জানত না। সুন্দর ধন্যবাদ!

— থিওরিজ

this এই ক্ষেত্রে একটি ভাল নির্বাচক। এখানে একটি কর্মরত জেএসফিডাল jsfiddle.net/dZAtt

— সমস্যাগুলি

লক্ষণীয় যে প্রথম উপাদানটির কোনও সন্তান থাকলে এটি কাজ করে না

— 72GM

Answer 2

আপনি ভাইবোন নির্বাচক ব্যবহার করতে পারেন ~:

h1.hc-reform ~ p{
     clear:both;
}

এটি কেবল প্রথমগুলি নয় , pপরে আসা সমস্ত উপাদান নির্বাচন করে .hc-reform।

Comments

প্রথম লিঙ্কের আই.ই. বাগগুলি অস্পষ্ট প্রান্তের কেস স্টাফ, এটি সম্ভবত কুইর্কস্মোড সেগুলি উপেক্ষা করে।

— অক্ষ

Answer 3

কোন >শিশু নির্বাচনকারী।

আপনি যা চান তা হ'ল +

তাই চেষ্টা করুন h1.hc-reform + p

ব্রাউজার সমর্থন দুর্দান্ত নয়

Comments

2020: ব্রাউজার সমর্থন দশ বছর পরে দুর্দান্ত। সিএসএস novices জন্য শুধুমাত্র একটি তথ্য।

— অ্যালেক্সিওয়ে

Answer 4

>একটি হল শিশু নির্বাচক । সুতরাং যদি আপনার এইচটিএমএল এর মত দেখাচ্ছে:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... তবে এটিই আপনার টিকিট।

তবে আপনার এইচটিএমএল দেখতে যদি এমন হয়:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

তারপরে আপনি সংলগ্ন নির্বাচকটি চান :

h1.hc-reform + p{
     clear:both;
}

Comments

আমি নিশ্চিত আশা করি তিনি এইচ 1 এর ভিতরে বাসা বাঁধেননি .. এছাড়াও, সংলগ্ন কেবল প্রথম পি নির্বাচন করে।

— স্টিফান মুলার 15

Answer 5

বেপারটা এমন না. এর h1.hc-reform > pঅর্থ " pনীচের ঠিক কোনও স্তরের h1.hc-reform"।

আপনি কি চান h1.hc-reform + p। অবশ্যই এটি ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণে কিছু সমস্যা সৃষ্টি করতে পারে; আপনি যদি পৃষ্ঠার পুরনো আইইগুলির সাথে সামঞ্জস্য করতে চান তবে আপনি অনুচ্ছেদগুলিতে ম্যানুয়ালি একটি ক্লাস যুক্ত করে বা কিছু জাভাস্ক্রিপ্ট ব্যবহার করে আটকে যাবেন (jQuery এ, উদাহরণস্বরূপ, আপনি এর মতো কিছু করতে পারেন $('h1.hc-reform').next('p').addClass('first-paragraph'))।

আরও তথ্য: http://www.w3.org/TR/CSS2/selector.html বা http://css-tricks.com/child-and-sibling-selectors/