এক নিয়মের মধ্যে একাধিক ক্লাস সহ উপাদানগুলিকে লক্ষ্য করুন

Question

আমার কিছু HTML রয়েছে যাতে একাধিক ক্লাসের উপাদান থাকতে পারে এবং আমি তাদের একটি নিয়মের মধ্যে নির্ধারণ করতে পারি, যাতে একই ধারক বিভিন্ন ধারকগুলির মধ্যে আলাদা হতে পারে। বলুন আমার সিএসএসে এটি আছে:

.border-blue {
    border: 1px solid blue;
}
.background {
    background: url(bg.gif);
}

তারপরে আমার এইচটিএমএলে এটি রয়েছে:

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>

আমি কি একক নিয়মের মধ্যে লক্ষ্যবস্তু রাখতে পারি? এটি পছন্দ করুন, উদাহরণস্বরূপ, আমি জানি যা কাজ করে না:

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}

Answer 1

.border-blue.background { ... }একাধিক ক্লাস সহ একটি আইটেম জন্য।
.border-blue, .background { ... }তাদের নিজস্ব বর্গ সহ একাধিক আইটেমের জন্য।
.border-blue .background { ... }এটি এমন একটি আইটেমের জন্য যেখানে '.ব্যাকগ্রাউন্ড' '.border-blue' এর সন্তান।

আরও বিশদ ব্যাখ্যার জন্য ক্রিসের উত্তর দেখুন ।

Comments

ধন্যবাদ! এটি সম্ভব কিনা আমি জানতাম না, তাই আমি এটি জানতে এখানে জিজ্ঞাসা করছিলাম।

— ট্যানার অটিঞ্জার

এই সমাধানটি আমার পক্ষে কাজ করে না (বা আর কাজ করে না ...)।

— ফ্রেস্কো

ক্রিসের উত্তর

— যেমনটি

.border-blue .background { ... }বাচ্চা মানে কি ? আমি এটি চেষ্টা করেছিলাম এবং এটি কাজ করে না

— এলিয়াভ লসকি

Answer 2

আমি যেমন করেছিলাম এবং বুঝতে পারি না ঠিক তেমন কেউ যদি হোঁচট খায় তবে উপরের দুটি ভিন্নতা বিভিন্ন ব্যবহারের ক্ষেত্রে।

পরবর্তী:

.blue-border, .background {
    border: 1px solid #00f;
    background: #fff;
}

আপনি যখন নীলের সীমানা বা ব্যাকগ্রাউন্ড শ্রেণীর উপাদানগুলিতে শৈলী যুক্ত করতে চান তখন যেমন:

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

তাদের সকলের জন্য নীল সীমানা এবং সাদা পটভূমি প্রয়োগ করা হবে।

তবে স্বীকৃত উত্তরটি আলাদা।

.blue-border.background {
    border: 1px solid #00f;
    background: #fff;
}

এটি উভয় শ্রেণীর উপাদানগুলিতে শৈলীর প্রয়োগ করে তাই এই উদাহরণে কেবল <div>উভয় শ্রেণীর সাথেই শৈলী প্রয়োগ করা উচিত (ব্রাউজারগুলিতে যা সিএসএসকে সঠিকভাবে ব্যাখ্যা করে):

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

সুতরাং মূলত এটির মতো এটি ভাবুন, কমা বিচ্ছেদ একটি শ্রেণি বা অন্য শ্রেণীর সাথে উপাদানগুলিতে প্রযোজ্য এবং বিন্দু বিভাজক এক শ্রেণি এবং অন্য শ্রেণীর উপাদানগুলির ক্ষেত্রে প্রযোজ্য ।

Comments

এটি একটি খুব সহায়ক উত্তর যা আমি প্রায় পড়িনি। চিয়ার্স!

— psicopoo

সাবধান হও. কোনও স্থান নেই.blue-border.background

— নু 8

think of it as AND and OR: দুর্দান্ত পরামর্শ। আমি .x .yএটিকে যুক্ত হিসাবে ভাবতে পারিy && ancestors.has(x)

— সিদ্ধার্থ গার্গ