সিএসএস ক্লাস এবং সাবক্ল্যাসেস

102

এটি কি করা সম্ভব নয়, কারণ আমি যা করছি তা ছাড়া এটি কাজ করছে বলে মনে হচ্ছে না? আমি সেই শ্রেণীর জন্য বিশেষত সিএসএস ব্যবহার করতে একটি শ্রেণীর অধীনে থাকা সাবক্লাসগুলি রাখতে সক্ষম হতে চাই ub সাবস্ক্লাস।

সিএসএস

.area1
{
    border:1px solid black;
}
.area1.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2.item
{
    color:blue;
}

এইচটিএমএল

<div class="area1">
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>
<div class="area2"> 
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>

যাতে আমি প্যারেন্ট সিএসএস ক্লাস "এলার্জি 1", "অঞ্চল 2" এর অধীনে উপাদানগুলির জন্য কেবল ক্লাস = "আইটেম" ব্যবহার করতে পারি। আমি জানি আমি এটি কাজ করতে ক্লাস = "এলার্জি 1 আইটেম" ব্যবহার করতে পারি, তবে কেন এটি সম্পর্কে ভার্জিক থাকতে হবে তা আমি বুঝতে পারি না। সিএসএস সাবক্লাসটি এটি নির্ধারণের জন্য কোন পিতাম শ্রেণীর অধীনে থাকা উচিত নয়?

দ্রষ্টব্য: এটি IE এ কাজ করে (এই মুহুর্তে 7 টি ব্যবহার করে) তবে এফএফ-তে এটি হয় না, তাই আমি ধরে নিচ্ছি যে এটি কোনও সিএসএস মানক পদ্ধতি নয়।

css

— রায়ান অ্যাবট
সূত্র

182

কেবল একটি স্থান যুক্ত করতে হবে:

.area2 .item
{
    ...
}

— চাদ বার্চ
সূত্র

আমি নিজেই সাবক্লাস নিজেই ব্যবহার করি না ...... কেউ কি আমাকে এমন কারণ দিতে পারে যেখানে এটি প্রয়োজনীয় হবে?

— প্যাট্রিকসুইন

2

সাবসিগ্রাসগুলি আপনার সিএসএস বিধিগুলিতে এটি উপযুক্ত যেখানে অতিরিক্ত নির্দিষ্টতা যুক্ত করার আরও একটি উপায় just আপনার কাছে একটি প্রধান শ্রেণি থাকতে পারে, তবে নথিতে যেখানে রয়েছে তার ভিত্তিতে আপনি কোনও উপাদানটির জন্য নিয়মটি পরিবর্তন করতে পারেন।

— ম্যাট হাওয়েল

74

এফওয়াইআই, আপনি যখন উপরের মতো একটি নিয়ম সংজ্ঞায়িত করেন, তখন দু'জন নির্বাচককে এক সাথে বেঁধে রাখা হয়:

.area1.item
{
    color:red;
}

এর অর্থ:

"ایرিয়াল 1" এবং "আইটেম" শ্রেণি উভয় উপাদানকে এই স্টাইলটি প্রয়োগ করুন।

যেমন:

<div class="area1 item">

দুঃখের বিষয় এটি আই 6 এ কাজ করে না, তবে এর অর্থ এটি।

— ম্যাট হাওয়েল
সূত্র

1

এটি আসলে আমি যা খুঁজছিলাম, এটি ব্যাখ্যা করার জন্য ধন্যবাদ!

— এফ -3000

আমি জানি এটি প্রাচীন তবে আপনার অর্থ কি "অঞ্চল 1" বা "আইটেম" এর পরিবর্তে "অঞ্চল 1" বা "আইটেম"? এটি একটি উল্লেখযোগ্য পার্থক্য করে।

— এমগামেরজ

এই জন্য আপনাকে অনেক ধন্যবাদ, আমি এটি বের করতে আমার মাথা নিচু করছি।

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

26

আপনার সমস্যাটি সিএসএসে আপনার দুটি শ্রেণির মধ্যে একটি অনুপস্থিত স্থান বলে মনে হচ্ছে:

.area1.item
{
    color:red;
}

হতে হবে

.area1 .item
{
    color:red;
}

— তোতা
সূত্র

14

আপনি কি কেবল বাচ্চাদের বাছাই করতে বাধ্য করতে চান? http://css.maxdesign.com.au/selectutorial/selectors_child.htm

.area1
{
        border:1px solid black;
}
.area1>.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2>.item
{
    color:blue;
}

— MrChrister
সূত্র

1

আমি যা ভাবছিলাম তা নয়, তবে আমি যদি কেবল প্রত্যক্ষ বাচ্চাদের চাই তবে এটির জন্য এটি ভাল তথ্য। ধন্যবাদ!

— রায়ান অ্যাবট 21

সে সম্পর্কে জানতাম না। মিঃসিস্ট্রিস্টের জন্য ধন্যবাদ

— সেবাস্তিয়ান

10

.Area1 এবং .item এর মধ্যে কেবল একটি স্থান রেখে দিন, যেমন:

.area1 .item
{
    color:red;
}

এই স্টাইলটি ক্লাস ایرিয়া 1 সহ কোনও উপাদানটির অভ্যন্তরে শ্রেণি আইটেমযুক্ত উপাদানগুলিতে প্রযোজ্য।

— M4N
সূত্র

8

আপনার ক্লাসের মধ্যে কেবল একটি স্থান রাখুন

.area1 .item
{
    ...
}

সিএসএস নির্বাচকদের জন্য এখানে একটি খুব ভাল রেফারেন্স ।

— mbillard
সূত্র

6

উপরের kR105 এর উত্তর থেকে অনুসরণ করা:

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

এখানে সমস্যাটি ছিল: আমার দুটি বাক্স (ডিভিএস) ছিল, প্রতিটি একই সীমানা-ব্যাসার্ধ (এইচটিএমএল 5), প্যাডিং এবং মার্জিন সহ, তবে তাদের বিভিন্ন রঙ করার দরকার ছিল। প্রতিটি বর্ণ শ্রেণীর জন্য এই 3 টি পরামিতি পুনরাবৃত্তি করার পরিবর্তে, আমি একটি "সুপারক্লাস" চেয়েছিলাম যাতে সীমানা-ব্যাসার্ধ / প্যাডিং / মার্জিন থাকে, তবে কেবলমাত্র পৃথক "সাবক্লাস" তাদের পার্থক্যগুলি প্রকাশ করতে (তারা সত্যই সাবক্লাস নয় বলে প্রত্যেকটির চারপাশে ডাবল কোটস) - আমার পরবর্তী পোস্ট দেখুন)। এটি কীভাবে কার্যকর হয়েছিল তা এখানে:

এইচটিএমএল:

<body>
  <div class="box box1"> Hello my color is RED </div>
  <div class="box box2"> Hello my color is BLUE </div>
</body>

সিএসএস:

div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px}
div.box1 {border:3px solid red; color:red}
div.box2 {border:3px solid blue; color:blue}

আশা করি কেউ এই সহায়ক পেয়েছেন।

— Maximus
সূত্র

3

এটি সিএসএসের মেরুদণ্ড, ক্যাসকেডিং স্টাইল শীটগুলির "ক্যাসকেড" ।

আপনি যদি নিজের সিএসএস বিধিগুলি একটি লাইনে লিখেন তবে কাঠামোটি দেখতে এটি আরও সহজ করে তোলে:

.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }

একাধিক ক্লাস ব্যবহার করাও CSS এর একটি ভাল মধ্যবর্তী / উন্নত ব্যবহার, দুর্ভাগ্যক্রমে একটি সুপরিচিত আই 6 g বাগ রয়েছে যা ক্রস ব্রাউজার কোড লেখার সময় এই ব্যবহারকে সীমাবদ্ধ করে:

<div class="area1 larger"> .... </div>

.area1 { width:200px; }
.area1.larger { width:300px; }

IE6 উপেক্ষা করে , একটি বহু-বর্গ নিয়ম প্রথম নির্বাচক তাই IE6 আসলে .area1.larger নিয়ম হিসাবে প্রযোজ্য

/*.area1*/.larger { ... }

মানে এটি সমস্ত .larger উপাদানগুলিকে প্রভাবিত করবে।

আইই 6-তে এটি একটি খুব বাজে এবং দুর্ভাগ্যজনক বাগ (অনেকের একটি) যা আপনাকে সিএসএসের বৈশিষ্ট্যটি কখনও ব্যবহার করতে বাধ্য করতে বাধ্য করে যদি আপনি একটি পরিষ্কার ক্রস ব্রাউজার সিএসএস ফাইল চান।

এর পরে সমাধানটি হ'ল জেনেরিক শ্রেণিকামের সংঘর্ষ এড়ানোর জন্য সিএসএস ক্লাসেরনাম উপসর্গগুলি ব্যবহার করা:

.area1 { ... }
.area1.area1Larger { ... }

.area2.area2Larger { ... }

পাশাপাশি কেবলমাত্র একটি শ্রেণি ব্যবহার করতে পারে, তবে সেইভাবে আপনি সিএসএসকে আপনার যুক্তিযুক্ত যুক্তিতে রাখতে পারেন, এই বিষয়টি জেনেও .area1Larger কেবল .area1 ইত্যাদি প্রভাবিত করে knowing

1

আপনি ডিভের জন্য ক্লাসটি প্রয়োগ করেন সেই বিভাগের সাথে শৈলীর উপাদানগুলির একটি রেফারেন্স পয়েন্ট হিসাবে ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ।

<div class="area1">
    <table>
        <tr>
                <td class="item">Text Text Text</td>
                <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>


.area1 { border:1px solid black; }

.area1 td { color:red; } /* This will effect any TD within .area1 */

সুপার সিমেন্টিক হওয়ার জন্য আপনার ক্লাসটি টেবিলের দিকে সরানো উচিত।

    <table class="area1">
        <tr>
                <td>Text Text Text</td>
                <td>Text Text Text</td>
        </tr>
    </table>

— জর্জ উইসকোম্ব
সূত্র

1

এই জাতীয় উপাদানের মধ্যে আপনার দুটি ক্লাসও থাকতে পারে

<div class = "item1 item2 item3"></div>

ক্লাসের প্রতিটি আইটেম তার নিজস্ব বর্গ হয়

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

— kR105
সূত্র

1

kR105 লিখেছেন:

এই জাতীয় উপাদানের মধ্যে আপনার দুটি ক্লাসও থাকতে পারে

<div class = "item1 item2 item3"></div

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

 <div class="box1 box2"> Hello what is my color? </div>

বাক্সের সীমানা এবং পাঠ্যটি নীল হবে, যেহেতু .box2 এর স্টাইলটি এই মানগুলি নির্ধারণ করে।

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

— Maximus
সূত্র