সিএসএস সিলেক্টারে ক্লাস এবং আইডি একত্রিত করবেন কীভাবে?

Question

আমার যদি নিম্নলিখিত ডিভ থাকে:

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

"শৈলীর সাথে একটি ডিভ id='content'এবং class='myClass'" ধারণাটি প্রকাশ করে এমন স্টাইল সংজ্ঞায়নের কোনও উপায় আছে কি ?

অথবা আপনি কি কেবল এক পথে বা অন্য পথে চলেছেন

<div class="content-sectionA">
    Lorem Ipsum...
</div>

অথবা

<div id="content-sectionA">
    Lorem Ipsum...
</div>

Comments

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

— টিস্টম্পার

@ টিটিম্পার: অগত্যা নয়। আপনি কেবল স্থির দলিলগুলির বিবেচনায় ভাবছেন। ঘটনাচক্রে, img#Inboxআপনার পৃষ্ঠায় আপনার একটি আইকন থাকতে পারে যা সাধারণত 50% অস্বচ্ছতাতে সেট করা থাকে। যাইহোক, যখন ব্যবহারকারীর একটি বার্তা থাকে, আপনি এটি 100% অস্বচ্ছতা হিসাবে সেট করাতে চান, এবং ব্যাকএন্ড এটিকে activeউপাদানটিতে একটি ক্লাস যুক্ত করে ইঙ্গিত করে । এই জাতীয় দৃশ্যে, এমন একটি নির্বাচক থাকা বোধগম্য হবে যা আইডি এবং ক্লাসের নাম উভয়কেই একত্রিত করে।

— লুজ মেজেস্টé

@ টিম্প্পার: এছাড়াও, আরও নির্দিষ্ট আইডি + ক্লাস কম্বো সিলেক্টর না থাকলে এটি একা আইডি সংস্করণটির চেয়ে বেশি ওজন / অগ্রাধিকার দেয় না? আফাইক, এটা করা উচিত। (আইওডাব্লু, আইডি + ক্লাস কম্বো সিলেক্টরের নিয়মগুলি আইডি কম্বো সিলেক্টরের নিয়মগুলিকে ওভাররাইড করবে ((এই মুহূর্তে এই থ্রেডটি খুঁজে পাওয়ার আমার কারণ / প্রয়োজন ছিল)))

— গোবিন্দ

সুতরাং, আমারও একই অবস্থা হচ্ছে। আমার কাছে উদাহরণস্বরূপ এমন অনেক পণ্য রয়েছে যার বিবরণ রয়েছে তবে স্বতন্ত্র পণ্যগুলির উপরও নির্দিষ্ট নিয়ন্ত্রণ চান, তাই আমি কি করতে পারি: code<পি আইডি = প্রোডাক্ট_1 ক্লাস = প্রোডাক্ট 1 প্রোডাক্ট </ p> <পি আইডি = প্রোডাক্ট ক্লাস = প্রোডাক্ট> প্রোডাক্ট 2 </p> code এটি কি সমস্ত পণ্যের সাধারণ স্টাইলিংকে অনুমতি দেয় তবে নির্দিষ্ট পণ্যের জন্য পৃথক স্টাইলিংকেও অনুমতি দেয়?

— টেমার জিয়াডি

Answer 1

আপনার স্টাইলশিটে:

div#content.myClass

সম্পাদনা করুন: এগুলিও সাহায্য করতে পারে:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

এবং, আপনার উদাহরণ অনুসারে:

div#content.sectionA

সম্পাদনা করুন, 4 বছর পরে: যেহেতু এটি অতি পুরানো এবং লোকেদের এটি সন্ধান করা হয়: আপনার নির্বাচকগুলিতে ট্যাগের নাম ব্যবহার করবেন না । #content.myClassএর চেয়ে দ্রুততর div#content.myClassকারণ ট্যাগনাম একটি ফিল্টারিং পদক্ষেপ যুক্ত করে যা আপনার প্রয়োজন নেই। কেবলমাত্র নির্বাচকগুলিতে ট্যাগ-নাম ব্যবহার করুন!

Comments

আইডি কোনও ডিভের সাথে সম্পর্কিত তা নির্দিষ্ট করে কেবল আইডি হিসাবে কোনও উপকার না করে কেবল রেন্ডারিং পারফরম্যান্সের জন্য ক্ষতিকারক হতে পারে (যদিও যথেষ্ট তুচ্ছ হলেও) আইডি ইতিমধ্যে স্বতন্ত্র। এটিকে পরিষ্কার করার পরিবর্তে আমি # কন্টেন্ট.মাই ক্লাসের সাথে যাব।

— mystrdat

div.class#idকম প্রস্তাবিত হলেও সমতুল্য হওয়া উচিত; প্রথমে নির্বাচক আরও অনন্য অংশ ব্যবহার করুন।

— এসএফ

আপনার প্রচেষ্টা এর জন্য ধন্যবাদ, এমনকি বছর পরে :)। এখনও আমার মত ছেলেদের সাহায্য। এটি কেবলমাত্র আমার প্রকল্পের জন্য ব্যবহার করেছেন। নিশ্চিতভাবে upvated।

— সি

Answer 2

সিএসএস #header .calloutএবং এর #header.calloutমধ্যে পার্থক্য রয়েছে ।

এখানে "সরল ইংরাজী" রয়েছে #header .callout:
শ্রেণীর নাম সহ সমস্ত উপাদান নির্বাচন করুন calloutযা আইডি সহ উপাদানটির বংশধর header।

এবং এর #header.calloutঅর্থ:
এমন উপাদান নির্বাচন করুন যার আইডি রয়েছে headerএবং এর শ্রেণীর নামও callout।

আপনি এখানে CSS কৌশলগুলি আরও পড়তে পারেন

Comments

আমি হোয়াইটস্পেস দিয়ে এই ভুলটি করেছি: # আইডি। ক্লাস বনাম # আইডি.class

— এরজান

Answer 3

আইডি এবং একটি উপাদানকে একটি উপাদানের সাথে একত্রিত করার ক্ষেত্রে কোনও অসুবিধা নেই, তবে আপনাকে একটি নিয়মের জন্য উভয় দ্বারা এটি সনাক্ত করার দরকার নেই। আপনি যদি সত্যিই চান তবে আপনি এটি করতে পারেন:

#content.sectionA{some rules}

divঅন্যরা যেমন পরামর্শ দিয়েছে তেমন আইডির সামনে আপনার দরকার নেই ।

সাধারণভাবে, সেই উপাদানটির সাথে নির্দিষ্ট সিএসএসের নিয়মগুলি আইডি সহ সেট করা উচিত এবং সেগুলি কেবল শ্রেণীর চেয়ে বেশি ওজন বহন করতে চলেছে। শ্রেণীর দ্বারা নির্দিষ্ট বিধিগুলি এমন বৈশিষ্ট্য হবে যা একাধিক আইটেমগুলিতে প্রযোজ্য যা আপনি যে কোনও সময় সামঞ্জস্য করার প্রয়োজনে একাধিক জায়গায় পরিবর্তন করতে চান না।

এটি এই পর্যন্ত ফোটে:

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

ধারণা তৈরী কর?

Answer 4

ওয়েল সাধারণত আপনার আইডি দ্বারা নির্দিষ্ট একটি উপাদান শ্রেণিবদ্ধ করা উচিত নয়, কারণ আইডি সর্বদা অনন্য, তবে আপনার যদি সত্যিই প্রয়োজন হয় তবে নিম্নলিখিতগুলি কাজ করা উচিত:

div#content.sectionA {
    /* ... */
}

Answer 5

আপনি সিএসএসে আইডি এবং ক্লাস একত্রিত করতে পারেন , তবে আইডিগুলি অনন্যরূপে উদ্দিষ্ট, সুতরাং কোনও সিএসএস নির্বাচককে ক্লাস যুক্ত করা এটি অতিরিক্ত যোগ্যতা অর্জন করবে।

Comments

এটা একটা ভাল দিক. আমি ভাবছি যদি আপনার খুব সাধারণ ক্লাসের সেট থাকে (ফ্লোট, উচ্চতা / প্রস্থের মতো জিনিস সেট করা, ফন্টের মতো জিনিসগুলি স্থাপন করা) এবং আপনি এই অনন্য ব্যতিক্রমের মধ্যে কিছুতে ওভাররাইড করতে চান?

— আজ

আপনি ভিন্ন পৃষ্ঠাগুলির সাথে একই স্টাইলশিটটি ব্যবহার না করেই। :-)

— প্যাট্রিক ম্যাকএলহানি

আরেকটি উদাহরণ: যখন জাভাস্ক্রিপ্টের সাথে গতিশীলভাবে ক্লাসগুলি যুক্ত করা হয় (#

— alচ্ছিক ফিল্ডস.এএনবলড

এমনকি যদি আপনি বিভিন্ন পৃষ্ঠাগুলির সাথে একই স্টাইলশিট ব্যবহার করেন, তবে শরীরে কোনও শ্রেণি স্থাপন করা বা আইডির জন্য একটি শৈলী রাখা এবং তারপরে উপযুক্ত ওভাররাইডিং শৈলীর সাথে ক্লাসগুলির জন্য পৃথক শ্রেণীর সংজ্ঞা দেওয়া ভাল d

— এরিক ভেন্ডেলিন

হ্যাঁ, আমি মনে করি এটি করা মোটামুটি সাধারণ। যেমন li # SomeTab.state-নির্বাচিত

— ইয়াবলারগো

Answer 6

ব্যবহার: tag.id ; tag#classআপনার CSS এর ট্যাগ ভেরিয়েবলগুলিতে।

Comments

আমি মনে করি আপনি এটি কিছুটা মিশিয়ে দিয়েছেন - ট্যাগ.class, এবং ট্যাগ # আইডি, না?

— হরিজ ক্রিয়েটেনিস

Answer 7

আইডিগুলি অনন্য ডকুমেন্ট প্রশস্ত বলে মনে করা হয়, সুতরাং আপনার উভয়ের উপর ভিত্তি করে নির্বাচন করা উচিত নয়। আপনি যদিও একটি উপাদান একাধিক ক্লাস বরাদ্দ করতে পারেনclass="class1 class2"

Comments

ক্লাস পরিবর্তন হতে পারে। উদাহরণস্বরূপ, আপনি Div # id.active এবং div # id.inactive থাকতে পারেন।

— ড্যানিয়েল মৌরা

যথেষ্ট ন্যায্য, এটি ভাবতে আসুন, আমি এই কার্যকারিতাটি ব্যবহার করেছি তবে পছন্দসই আচরণটি কী তা আমি ভুল বুঝেছি।

— বেন হিউজেস

Answer 8

আমি মনে করি আপনি সব ভুল। আইডি বনাম শ্রেণি নির্দিষ্টকরণের প্রশ্ন নয়; তাদের সম্পূর্ণ ভিন্ন যৌক্তিক ব্যবহার রয়েছে।

পৃষ্ঠাগুলির নির্দিষ্ট অংশগুলি সনাক্ত করতে আইডি ব্যবহার করা উচিত: শিরোনাম, এনএভি বার, মূল নিবন্ধ, লেখক বিশিষ্টতা, পাদচরণ।

পৃষ্ঠাগুলিতে শৈলী প্রয়োগ করতে ক্লাস ব্যবহার করা উচিত। ধরা যাক আপনার একটি সাধারণ ম্যাগাজিনের সাইট রয়েছে। সাইটের প্রতিটি পৃষ্ঠায় একই উপাদান থাকতে চলেছে - শিরোনাম, এনএভি, প্রধান নিবন্ধ, সাইডবার, পাদচরণ। তবে আপনার ম্যাগাজিনের বিভিন্ন বিভাগ রয়েছে - অর্থনীতি, ক্রীড়া, বিনোদন। অর্থনীতি রক্ষণশীল এবং বর্গক্ষেত্র, ক্রীড়া ক্রিয়া- y, বিনোদন উজ্জ্বল এবং তরুণ - আপনি তিনটি বিভাগের আলাদা চেহারা দেখতে চান looks

আপনি তার জন্য ক্লাস ব্যবহার করুন। আপনার একাধিক আইডি করতে হবে না - # অর্থনীতি-নিবন্ধ এবং # ক্রীড়া-নিবন্ধ এবং # বিনোদন-নিবন্ধ। এটা বোঝা যায় না। পরিবর্তে, আপনি তিনটি শ্রেণি,। অর্থনীতি, ক্রীড়া এবং অন্তর্ভুক্তি সংজ্ঞায়িত করবেন, তারপরে প্রতিটি জন্য নতুন, # পার্টিকেল এবং # ফুটার আইডি সংজ্ঞায়িত করবেন।

Comments

আপনি উল্লিখিত বেশিরভাগ উপাদানগুলির জন্য আপনি আসলে আইডির পরিবর্তে শব্দার্থক এইচটিএমএল ট্যাগ ব্যবহার করতে পারেন। শিরোনাম, পাদলেখ, ন্যাভ, বিভাগ ইত্যাদি ট্যাগগুলি কোনও কারণে বিদ্যমান।

— ওয়াল্টার শোয়ার্জ

তবে প্রকৃতপক্ষে আপনার কেবল আইডিগুলি এমন উপাদানগুলির জন্য ব্যবহার করা উচিত যা অনন্য হওয়া উচিত, সিঙ্গেলন। তবে তবুও এটি কেবলমাত্র কার্যকর যদি আপনার জাভাস্ক্রিপ্টের মাধ্যমে সেই উপাদানটি অ্যাক্সেস করার প্রয়োজন হয় কারণ আইডি ব্যবহার করা আপনার সিএসএসকে খুব নির্দিষ্ট এবং পরবর্তীকালে অন্য সিএসএস এবং / অথবা এইচটিএমএল এর সাথে একত্রীকরণ করা শক্ত করে তোলে। এখানে যুক্তিও রয়েছে যে আইডি এর ক্লাসগুলি তত দ্রুত হয় তবে পার্থক্যটি সত্যই নগণ্য।

— ওয়াল্টার শোয়ার্জ

Answer 9

.sectionA[id='content'] { color : red; }

ডক্টাইপটি এইচটিএমএল ৪.০১ এর হলেও কাজ করবে না ...