লেখকরা কীভাবে :first-childকাজ করে সে সম্পর্কে ভুল বোঝাবুঝির এটি অন্যতম সুপরিচিত উদাহরণ । CSS 2 চালু , :first-childসিউডো-বর্গ প্রতিনিধিত্ব করে তার পিতা বা মাতা খুব প্রথম সন্তান । এটাই. একটি প্রচলিত ভুল ধারণা রয়েছে যে এটি যে কোনও শিশু উপাদানটিকে যৌগিক নির্বাচকদের দ্বারা নির্ধারিত শর্তগুলির সাথে প্রথম মিলিয়েছে। নির্বাচকরা যেভাবে কাজ করেন তার কারণে ( ব্যাখ্যাটির জন্য এখানে দেখুন ), এটি কেবল সত্য নয়।
নির্বাচক স্তর 3 একটি :first-of-typeছদ্ম-শ্রেণির সাথে পরিচয় করিয়ে দেয় , যা তার উপাদান ধরণের ভাইবোনদের মধ্যে প্রথম উপাদানকে উপস্থাপন করে। এই উত্তরটি চিত্রের সাথে ব্যাখ্যা করে :first-childএবং এর মধ্যে পার্থক্য রয়েছে :first-of-type। যাইহোক, হিসাবে হিসাবে :first-child, এটি অন্য কোন শর্ত বা বৈশিষ্ট্য তাকান না। এইচটিএমএলে, উপাদানটির নাম ট্যাগ নাম দ্বারা প্রতিনিধিত্ব করা হয়। প্রশ্নে, টাইপটি হ'ল p।
দুর্ভাগ্যক্রমে, :first-of-classপ্রদত্ত শ্রেণীর প্রথম শিশু উপাদানটির সাথে মিলের জন্য অনুরূপ সিউডো-শ্রেণি নেই। এক কার্যসংক্রান্ত যে আপনাদের Verou এবং আমি নিয়ে এসেছেন এই জন্য (সম্পূর্ণই স্বাধীনভাবে যদিও) প্রথম আপনার পছন্দসই শৈলী প্রয়োগ হয় সব যে বর্গ সঙ্গে আপনার উপাদানের:
/*
* Select all .red children of .home, including the first one,
* and give them a border.
*/
.home > .red {
border: 1px solid red;
}
... তারপরে প্রথম শ্রেণীর পরে আসা শ্রেণীর সাথে উপাদানগুলির শৈলীর "পূর্বাবস্থাপন" করুন , ওভাররাইডিং নিয়মে সাধারণ ভাইবিলিং সংযুক্তকারী~ ব্যবহার করে :
/*
* Select all but the first .red child of .home,
* and remove the border from the previous rule.
*/
.home > .red ~ .red {
border: none;
}
এখন কেবল প্রথম উপাদানটির সাথে class="red"একটি সীমানা থাকবে।
বিধিগুলি কীভাবে প্রয়োগ করা হয় তার একটি চিত্র এখানে দেওয়া হয়েছে:
<div class="home">
<span>blah</span> <!-- [1] -->
<p class="red">first</p> <!-- [2] -->
<p class="red">second</p> <!-- [3] -->
<p class="red">third</p> <!-- [3] -->
<p class="red">fourth</p> <!-- [3] -->
</div>
কোনও বিধি প্রয়োগ করা হয় না; কোনও সীমানা রেন্ডার করা হয় না।
এই উপাদানটির ক্লাস নেই red, সুতরাং এটি এড়িয়ে গেছে।
শুধুমাত্র প্রথম বিধি প্রয়োগ করা হয়; একটি লাল সীমানা রেন্ডার করা হয়।
এই উপাদানটির redক্লাস redরয়েছে তবে এর পিতামাতার ক্লাসের সাথে কোনও উপাদান পূর্ববর্তী নয় । সুতরাং দ্বিতীয় বিধি প্রয়োগ করা হয় না, শুধুমাত্র প্রথমটি এবং উপাদানটি তার সীমানা বজায় রাখে।
উভয় বিধি প্রয়োগ করা হয়; কোনও সীমানা রেন্ডার করা হয় না।
এই উপাদানটির শ্রেণি রয়েছে red। এটি ক্লাসের সাথে কমপক্ষে অন্য একটি উপাদান দ্বারাও আগে রয়েছে red। সুতরাং উভয় বিধি প্রয়োগ করা হয়, এবং দ্বিতীয় borderবিবরণী প্রথমটিকে ওভাররাইড করে, যার ফলে এটি "পূর্বাবস্থায় ফেলা" থাকে, সুতরাং কথা বলা।
বোনাস হিসাবে, যদিও এটি নির্বাচক 3-এ প্রবর্তিত হয়েছিল, সাধারণ ভাইবিলিং কম্বিনেটর আসলে আই 7 and এবং আরও নতুন দ্বারা সমর্থিত, এর বিপরীতে :first-of-typeএবং :nth-of-type()যা কেবল আইই 9 দ্বারা সমর্থিত। আপনার যদি ভাল ব্রাউজার সমর্থন প্রয়োজন হয়, আপনি ভাগ্যবান।
প্রকৃতপক্ষে, এই কৌশলটি যে ভাইবোন সংযুক্তকারীটিই একমাত্র গুরুত্বপূর্ণ উপাদান, এবং এটির মধ্যে এমন আশ্চর্যজনক ব্রাউজার সমর্থন রয়েছে, এই কৌশলটি খুব বহুমুখী করে তোলে - আপনি শ্রেণি নির্বাচকদের পাশাপাশি অন্যান্য জিনিসগুলির দ্বারা উপাদানগুলিকে ফিল্টারিংয়ের জন্য এটি খাপ খাইয়ে নিতে পারেন:
আপনি এটি :first-of-typeক্লাস সিলেক্টরের পরিবর্তে কোনও টাইপ সিলেক্টর সরবরাহ করে (আবার, এখানে পরবর্তী বিভাগে এর ভুল ব্যবহারের বিষয়ে আরও বেশি) সরবরাহ করে আইই 7 এবং আই 8 তে কাজ করতে এটি ব্যবহার করতে পারেন :
article > p {
/* Apply styles to article > p:first-of-type, which may or may not be :first-child */
}
article > p ~ p {
/* Undo the above styles for every subsequent article > p */
}
আপনি ক্লাসের পরিবর্তে বৈশিষ্ট্য নির্বাচনকারী বা অন্য কোনও সাধারণ নির্বাচক দ্বারা ফিল্টার করতে পারেন ।
আপনি ছদ্ম-উপাদানগুলির সাথে ছদ্ম-উপাদানগুলির সাথে এই ওভাররাইডিং কৌশলটিও একত্রিত করতে পারেন যদিও ছদ্ম উপাদানগুলি প্রযুক্তিগতভাবে সহজ নির্বাচক নয়।
নোট করুন যে এটি কাজ করার জন্য আপনাকে আগে থেকেই জানতে হবে আপনার অন্যান্য ভাইবোন উপাদানগুলির জন্য ডিফল্ট শৈলীগুলি কী হবে তাই আপনি প্রথম নিয়মটিকে ওভাররাইড করতে পারেন। অতিরিক্তভাবে, যেহেতু এটিতে সিএসএসে ওভাররাইডিং বিধিগুলি জড়িত, আপনি সিলেক্টর এপিআই বা সেলেনিয়ামের সিএসএস লোকেটারগুলির সাথে ব্যবহারের জন্য কোনও একক নির্বাচকের সাথে একই জিনিসটি অর্জন করতে পারবেন না ।
এটি উল্লেখযোগ্য যে সিলেক্টর 4 স্বরলিপিটির (একটি মূলত একটি সম্পূর্ণ নতুন সিউডো-ক্লাস নামে পরিচিত ) একটি:nth-child() বর্ধনের সাথে পরিচয় করিয়ে :nth-match()দেয়, যা আপনাকে :nth-child(1 of .red)অনুমানের পরিবর্তে কিছু ব্যবহার করতে দেয় .red:first-of-class। তুলনামূলকভাবে সাম্প্রতিক প্রস্তাব হওয়ায় এটি উত্পাদন সাইটগুলিতে এখনও ব্যবহারযোগ্য হওয়ার জন্য পর্যাপ্ত আন্তঃযোগাযোগ্য বাস্তবায়ন নেই। আশা করি শিগগিরই এটি বদলে যাবে। এরই মধ্যে, আমি প্রস্তাবিত কর্মক্ষেত্রটি বেশিরভাগ ক্ষেত্রেই কাজ করা উচিত।
মনে রাখবেন যে এই উত্তরটি ধরে নিয়েছে যে প্রশ্নটি প্রতিটি প্রথম শিশু উপাদানকে সন্ধান করছে যা একটি নির্দিষ্ট বর্গ রয়েছে। পুরো ডকুমেন্ট জুড়ে একটি জটিল সিলেক্টরের নবম ম্যাচের জন্য ছদ্ম-শ্রেণি বা এমনকি জেনেরিক সিএসএস সমাধান নেই - কোনও সমাধান বিদ্যমান কিনা তা নথির কাঠামোর উপর নির্ভর করে। jQuery এর প্রদান করে :eq(), :first, :lastএবং এই কাজের জন্য আরো, কিন্তু নোট আবার যে তারা থেকে খুব ভিন্নভাবে কাজ :nth-child()এট । নির্বাচক এপিআই ব্যবহার করে আপনি হয় document.querySelector()প্রথম ম্যাচটি পেতে ব্যবহার করতে পারেন :
var first = document.querySelector('.home > .red');
বা document.querySelectorAll()কোনও নির্দিষ্ট ম্যাচ বাছাই করতে একটি সূচক দিয়ে ব্যবহার করুন :
var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc
যদিও ফিলিপ ডাবমিয়ারের.red:nth-of-type(1) মূল গৃহীত উত্তরের সমাধানটি কাজ করে (যা মূলত মার্টিন লিখেছিলেন কিন্তু সেই থেকে মুছে ফেলা হয়েছে), এটি আপনি যেভাবে প্রত্যাশা করেছিলেন তা আচরণ করে না।
উদাহরণস্বরূপ, আপনি যদি কেবলমাত্র pনিজের মূল মার্কআপটিতে এটি নির্বাচন করতে চান :
<p class="red"></p>
<div class="red"></div>
... তবে আপনি .red:first-of-type(সমতুল্য .red:nth-of-type(1)) ব্যবহার করতে পারবেন না , কারণ প্রতিটি উপাদানই এর প্রথম ধরণের ( pএবং divযথাক্রমে) এক, তাই উভয়ই নির্বাচক দ্বারা মিলে যাবে।
যখন কোনও নির্দিষ্ট শ্রেণির প্রথম উপাদানটিও এর ধরণের প্রথম হয় , ছদ্ম-শ্রেণি কাজ করবে তবে এটি কেবল কাকতালীয়ভাবে ঘটে । এই আচরণ ফিলিপের উত্তরে প্রদর্শিত হয়। এই উপাদানটির আগে আপনি একই ধরণের কোনও উপাদানে আটকে যাওয়ার মুহুর্তে নির্বাচক ব্যর্থ হয়ে যাবে। আপডেট করা মার্কআপ নেওয়া:
<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
এর সাথে একটি নিয়ম প্রয়োগ করা কার্যকর .red:first-of-typeহবে, তবে আপনি একবার pক্লাস ছাড়াই অন্য যুক্ত করলেন :
<div class="home">
<span>blah</span>
<p>dummy</p>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
... নির্বাচক অবিলম্বে ব্যর্থ হবে, কারণ প্রথম .redউপাদানটি এখন দ্বিতীয় p উপাদান।