আমি কি এক যথেচ্ছ নির্বাচকের সাথে: নবম-শিশু () বা: নবম-টাইপ () সংযুক্ত করতে পারি?

116

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

table.myClass tr.row:nth-child(odd) {
  ...
}

<table class="myClass">
  <tr>
    <td>Row
  <tr class="row"> <!-- I want this -->
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row"> <!-- And this -->
    <td>Row
</table>

তবে :nth-child()কেবল সমস্ত trউপাদানগুলি "সারি" শ্রেণীর কিনা তা নির্বিশেষে গণনা করা বলে মনে হচ্ছে , তাই আমি যে দুটি সন্ধান করছি তার পরিবর্তে আমি একটি এমনকি "সারি" উপাদানটি দিয়ে শেষ করি। একই জিনিস ঘটে সঙ্গে :nth-of-type()।

কেউ ব্যাখ্যা করতে পারেন কেন?

css css-selectors

— atanamir
সূত্র

144

এটি একটি খুব সাধারণ সমস্যা যা কীভাবে :nth-child()এবং :nth-of-type()কাজ করে তার একটি ভুল বোঝাবুঝির কারণে উত্থিত হয় । দুর্ভাগ্যক্রমে, এখনও কোনও নির্বাচক-ভিত্তিক সমাধান নেই কারণ নির্বাচকরা নবম সন্তানের সাথে ম্যাচ করার কোনও উপায় সরবরাহ করেন না যা বিজোড়-সংখ্যাযুক্ত, এমনকি সংখ্যাসূচক বা an+bযেখানে a != 1এবং যেখানে কোনও যেমন একটি প্যাটার্নের উপর ভিত্তি করে একটি স্বেচ্ছাসেবী নির্বাচকের সাথে মেলে b != 0। এটি কেবল নির্বাচক, অবহেলা এবং সাধারণ নির্বাচকদের আরও জটিল সংমিশ্রণের জন্য শ্রেণি নির্বাচকদের বাইরেও প্রসারিত।

:nth-child()সিউডো-বর্গ মধ্যে উপাদানের বড়, মোট ছাত্র সব একই পিতা বা মাতা অধীন ভাইবোন। এটি কেবল নির্বাচকদের সাথে মেলে এমন ভাইবোনদেরই গণনা করে না। একইভাবে, :nth-of-type()সিউডো-শ্রেণি ভাইবোনদের একই উপাদান টাইপ ভাগ করে নেওয়ার গণনা করে, যা এইচটিএমএলতে ট্যাগের নাম বোঝায়, এবং বাকি নির্বাচককে নয়।

এর অর্থ হ'ল যদি একই পিতামাতার সমস্ত বাচ্চারা একই উপাদান ধরণের হয়, উদাহরণস্বরূপ, টেবিল বডির ক্ষেত্রে যার একমাত্র শিশু trউপাদান বা তালিকার উপাদান যার একমাত্র শিশু liউপাদান, তবে :nth-child()এবং :nth-of-type()অভিন্ন আচরণ করবে, অর্থাৎ প্রতিটি মানের জন্য an+b, :nth-child(an+b)এবং :nth-of-type(an+b)উপাদানগুলির একই সেটটির সাথে মিলবে।

প্রকৃতপক্ষে, সিউডো-ক্লাস যেমন :nth-child()এবং সিউডো ক্লাস সহ একটি প্রদত্ত যৌগ নির্বাচনের সমস্ত সাধারণ নির্বাচক বাকী নির্বাচকের সাথে মিলে যাওয়া উপাদানগুলির সাবসেটটি দেখার চেয়ে একে অপরের থেকে স্বতন্ত্রভাবে:not() কাজ করে ।

এটি আরও বোঝায় যে প্রতিটি পৃথক যৌগিক নির্বাচক ^{1 এর}মধ্যে সাধারণ নির্বাচকদের মধ্যে অর্ডার সম্পর্কে কোনও ধারণা নেই , উদাহরণস্বরূপ নিম্নলিখিত দুটি নির্বাচক সমতুল্য:

table.myClass tr.row:nth-child(odd)
table.myClass tr:nth-child(odd).row

ইংরেজী অনুবাদ, উভয়ের অর্থ:

trনিম্নলিখিত স্বাধীন অবস্থার সাথে মেলে এমন কোনও উপাদান নির্বাচন করুন :

এটি তার পিতামাতার একটি বিজোড় সংখ্যাযুক্ত শিশু;

এটির "সারি" শ্রেণি রয়েছে; এবং

এটি এমন একটি tableউপাদানটির বংশধর যা "মাই ক্লাস" শ্রেণি রয়েছে।

^{(আপনি এখানে কেবল বিন্দুবিহীন তালিকার আমার ব্যবহার লক্ষ্য করবেন, কেবলমাত্র পয়েন্টটি হোম চালানোর জন্য)}

বর্তমানে কোনও খাঁটি সিএসএস সমাধান নেই বলে আপনাকে উপাদানগুলি ফিল্টার করার জন্য স্ক্রিপ্ট ব্যবহার করতে হবে এবং সেই অনুসারে শৈলী বা অতিরিক্ত শ্রেণীর নাম প্রয়োগ করতে হবে। উদাহরণস্বরূপ, নীচে jQuery ব্যবহার করে একটি সাধারণ কর্মসূচী রয়েছে (ধরে নেওয়া trযে টেবিলের মধ্যে উপাদানগুলির মধ্যে কেবল একটি সারি গোষ্ঠী রয়েছে):

$('table.myClass').each(function() {
  // Note that, confusingly, jQuery's filter pseudos are 0-indexed
  // while CSS :nth-child() is 1-indexed
  $('tr.row:even').addClass('odd');
});

সংশ্লিষ্ট সিএসএস সহ:

table.myClass tr.row.odd {
  ...
}

আপনি যদি সেলেনিয়ামের মতো স্বয়ংক্রিয় পরীক্ষার সরঞ্জামগুলি বা lxML এর মতো সরঞ্জামগুলি এইচটিএমএল প্রসেসিং ব্যবহার করেন তবে এই সরঞ্জামগুলির মধ্যে অনেকগুলি এক্সপ্যাথকে বিকল্প হিসাবে অনুমতি দেয়:

//table[contains(concat(' ', @class, ' '), ' myClass ')]//tr[contains(concat(' ', @class, ' '), ' row ')][position() mod 2)=1]

বিভিন্ন প্রযুক্তি ব্যবহার করে অন্যান্য সমাধানগুলি পাঠকের অনুশীলন হিসাবে ছেড়ে যায়; এটি উদাহরণের জন্য একটি সংক্ষিপ্ত, স্বীকৃত উদাহরণ।

কি এটা এর মূল্য, সেখানে প্রস্তাব হল থেকে একটি এক্সটেনশন :nth-child()স্বরলিপি একটি প্রদত্ত নির্বাচক মিলে যে n তম সন্তান নির্বাচন নির্দিষ্ট উদ্দেশ্যের জন্য নির্বাচক স্তর 4 জোড়া যেতে পারে। ²

যে নির্বাচক দ্বারা ম্যাচগুলিতে ফিল্টার করবেন :nth-child()সেগুলি নির্বাচিতরা বিদ্যমান নির্বাচক বাক্য বিন্যাস দ্বারা নির্ধারিত ক্রম অনুসারে কীভাবে একে অপরের থেকে স্বতন্ত্রভাবে পরিচালনা করে তার কারণ হিসাবে আবার যুক্তি হিসাবে সরবরাহ করা হয়। সুতরাং আপনার ক্ষেত্রে এটি দেখতে এই রকম হবে:

table.myClass tr:nth-child(odd of .row)

(একজন চমকপ্রদ পাঠক তাত্ক্ষণিকভাবে নোট করবেন যে এটি :nth-child(odd of tr.row)পরিবর্তে হওয়া উচিত , যেহেতু সরল নির্বাচক trএবং :nth-child()একে অপরের থেকে স্বতন্ত্রভাবে পরিচালনাও করতে পারেন This এটি কার্যকরী ছদ্ম-শ্রেণীর একটি সমস্যা যা নির্বাচকদের গ্রহণ করে, আমি কীট কৃমি চাইছি বরং এই উত্তরের মাঝখানে খুলবেন না Instead পরিবর্তে আমি এই ধারণাটি নিয়ে যাচ্ছি যে বেশিরভাগ সাইটে trটেবিলের বডিতে একে অপরের ভাইবোন হিসাবে উপাদানগুলি ছাড়া অন্য কোনও উপাদান থাকবে না , যা উভয় বিকল্পকে কার্যত সমতুল্য করে তুলবে))

অবশ্যই, একেবারে নতুন স্পেসিফিকেশনে একেবারে নতুন প্রস্তাব হওয়ায় এটি সম্ভবত কয়েক বছরের রাস্তা অবধি বাস্তবায়ন দেখতে পাবে না। ইতিমধ্যে, আপনাকে উপরের মতো কোনও স্ক্রিপ্ট ব্যবহার করে আটকে থাকতে হবে।

¹ _{আপনি যদি কোনও প্রকার বা সর্বজনীন নির্বাচক নির্দিষ্ট করে থাকেন তবে এটি অবশ্যই প্রথমে আসবে। তবে নির্বাচকরা মৌলিকভাবে কীভাবে কাজ করে তা পরিবর্তিত হয় না; এটি সিনট্যাকটিক গণ্ডগোল ছাড়া আর কিছুই নয় nothing}

² _{এটি মূলত প্রস্তাবিত হয়েছিল :nth-match(), কারণ এটি এখনও কেবল তার ভাইবোনদের সাথে সম্পর্কিত কোনও উপাদানকে গণ্য করে, এবং প্রদত্ত নির্বাচিতের সাথে মেলে এমন অন্য উপাদানগুলির সাথে নয়, এটি ২০১৪ সাল থেকে বিদ্যমান :nth-child()পরিবর্তে এক্সটেনশন হিসাবে পুনরুদ্ধার করা হয়েছে ।}

— বোল্টক্লক
সূত্র

3

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

— লাল মটর

1

@ দ্য রেড মটর: আমার সবচেয়ে বড় এইচটিএমএল পোষা প্রাণীর মধ্যে একটি: "উচ্চতর / সর্বনিম্ন থেকে সর্বনিম্ন / সর্বোচ্চ:" ক্রমহীন একটি তালিকা অনুসরণ করে। মানে আসো, সিরিয়াসলি?

— BoltClock

6

আসলে তা না..

ডক্স থেকে উদ্ধৃতি

:nth-childসিউডো-বর্গ একটি উপাদান একটি + খ -1 আছে মিলে যায় ডকুমেন্ট গাছে এটা আগে ভাইবোন , একজন প্রদত্ত ইতিবাচক বা এন জন্য শূন্য মান, এবং একটি পিতা বা মাতা উপাদান রয়েছে।

এটি নিজস্ব একটি নির্বাচনকারী এবং ক্লাসগুলির সাথে একত্রিত হয় না। আপনার নিয়মে এটি কেবল একই সাথে উভয় নির্বাচককে সন্তুষ্ট করতে হবে, সুতরাং এটি ক্লাস :nth-child(even)করার ক্ষেত্রে টেবিলে সারিগুলি দেখায় .row।

— গ্যাব্রিয়েল পেট্রিওলি
সূত্র

0

nth-of-typeএকই ধরণের উপাদানটির nth-childসূচী অনুসারে কাজ করে তবে কোন ধরণের ভাইবোন উপাদানই নয় তা কেবল সূচক অনুযায়ী কাজ করে।

উদাহরণ স্বরূপ

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>

ধরুন উপরের এইচটিএমএলে আমরা বিশ্রামের ক্লাস থাকা সমস্ত উপাদান গোপন করতে চাই want

এই ক্ষেত্রে nth-childএবং nth-of-typeসমস্ত উপাদান একই ধরণের যে একইভাবে <div>CSS হওয়া উচিত ঠিক একইভাবে কাজ করবে

.rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
    display:none;
}

অথবা

.rest:nth-of-type(6), .rest:nth-of-type(7), .rest:nth-of-type(8), .rest:nth-of-type(9), .rest:nth-of-type(10){
    display:none;
}

এখন আপনি অবশ্যই ভাবছেন যে এর মধ্যে পার্থক্য কী nth-childএবং nth-of-typeতাই এটিই পার্থক্য

ধরুন এইচটিএমএল হ'ল

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>

উপরের এইচটিএমএলে .restউপাদানগুলির ধরন অন্যের থেকে পৃথক .restঅনুচ্ছেদে এবং অন্যগুলি ভাগ হয় তাই এই ক্ষেত্রে আপনি যদি ব্যবহার করেন তবে আপনাকে nth-childএটি লিখতে হবে

.rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
    display:none;
}

তবে আপনি যদি নবম ধরণের সিএসএস ব্যবহার করেন তবে এটি হতে পারে

.rest:nth-of-type(1), .rest:nth-of-type(2), .rest:nth-of-type(3), .rest:nth-of-type(4), .rest:nth-of-type(5){
    display:none;
}

.restউপাদান ধরণের হিসাবে <p>তাই এখানে nth-of-typeপ্রকারটি সনাক্ত করা হয় .restএবং তারপরে তিনি 1 ম, 2 য়, 3 য়, 4 র্থ, 5 ম মৌলের উপর সিএসএস প্রয়োগ করেছিলেন <p>।

— গৌরব আগরওয়াল
সূত্র

<tr>ট্যাগগুলির জন্য এটি কতটা কার্যকর ?

— অ্যালেক্সিস উইলক

0

আপনি এক্সপথ দিয়ে এটি করতে সক্ষম হতে পারেন। কিছু //tr[contains(@class, 'row') and position() mod 2 = 0]কাজ করতে পারে। আরও ক্লাস কীভাবে আরও সুনির্দিষ্টভাবে মিলবে তার বিশদটিতে প্রসারিত অন্যান্য এসও প্রশ্ন রয়েছে।

— the8472
সূত্র

0

আপনার উত্তর এখানে

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TEST</title>

  <style>

    .block {
      background: #fc0;
      margin-bottom: 10px;
      padding: 10px;
    }
    /* .large > .large-item:nth-of-type(n+5) {
      background: #f00;
    } */

    .large-item ~ .large-item ~ .large-item ~ .large-item ~ .large-item {
      background: #f00;
    }

  </style>
</head>
<body>

<h1>Should be the 6th Hello Block that start red</h1>
<div class="small large">
  <div class="block small-item">Hello block 1</div>
  <div class="block small-item large-item">Hello block 2</div>
  <div class="block small-item large-item">Hello block 3</div>
  <div class="block small-item large-item">Hello block 4</div>
  <div class="block small-item large-item">Hello block 5</div>
  <div class="block small-item large-item">Hello block 6</div>
  <div class="block small-item large-item">Hello block 7</div>
  <div class="block small-item large-item">Hello block 8</div>
</div>

</body>
</html>

— Pocketninja
সূত্র

0

নবম-চাইল্ড ব্যবহার এবং লুকানো ট্যাগগুলি এড়িয়ে যাওয়া চারপাশের সমস্ত প্রশ্ন এই একের ডুপ হিসাবে পুনঃনির্দেশিত বলে মনে হচ্ছে তাই আমি এটি এখানে রেখে দেব। আমি এই ব্লগটি জুড়ে এসেছি https://blog.blackbam.at/2015/04/09/css-nth-child-selector-ignore-hided-element/ যা নবম সন্তানের গোপন উপাদানগুলিকে উপেক্ষা করার জন্য একটি চতুর সিএসএস পদ্ধতির ব্যবহার করে, নিম্নরূপ:

নীচের সিএসএসে প্রতিটি দ্বিতীয় দৃশ্যমান উপাদানের ডানদিকে মার্জিন যুক্ত হবে সিপডব্লু শ্রেণীর যে উপাদানই নয়।

.cpw {
    display:none;
}

.video_prewrap {
    margin-right:20px;
}

.video_prewrap:nth-child(2n) {
    margin-right:0;
}

.cpw ~ .video_prewrap:nth-child(2n) {
    margin-right:20px;
}

.cpw ~ .video_prewrap:nth-child(2n-1) {
    margin-right:0;
}

আশা করি যে লুকানো উপাদানগুলির প্রশ্নগুলি উপেক্ষা করার জন্য দুপ ট্রেইল অনুসরণকারী কোনও ব্যক্তিকে সহায়তা করবে!

— IrishDubGuy
সূত্র

1

আমি এটি upvote করতে চান তবে এটি একটি ওয়ার্কিং ডেমো প্রয়োজন।

— মুব

আমার স্মৃতিচারণটি হ'ল এটি প্রথমে যতটা দৃust় ছিল তা প্রথমদিকে মনে হচ্ছিল না - আমি এখন শীর্ষ ভোটের মন্তব্যে যাব, এটি সম্ভব নয়।

— আইরিশডাবগুয়ে

0

যদি সমস্ত নির্বাচকের জন্য আপনার প্যারেন্ট ক্লাস থাকে তবে আপনি সেই ক্লাসটি ব্যবহার করেন document.querySelector("main .box-value:nth-child(3) select.priorityOption"); কারণ সেই ক্ষেত্রে document.querySelector("main .box-value select.priorityOption:nth-child(3)");কাজ হচ্ছে না। ধন্যবাদ

<div class="card table">
    <div class="box">
        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>

        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>

        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>
    </div>
</div>

— যতীন আগরওয়াল
সূত্র