সিএসএস কি কোনও উপাদান থাকা বাচ্চাদের সংখ্যা সনাক্ত করতে পারে?

Question

আমি সম্ভবত আমার নিজের প্রশ্নের উত্তর দিচ্ছি, তবে আমি অত্যন্ত কৌতূহলী।

আমি জানি যে সিএসএস কোনও পিতামাতার পৃথক বাচ্চাকে বাছাই করতে পারে, তবে তার পিতামাতার নির্দিষ্ট পরিমাণ বাচ্চা থাকলে পাত্রে বাচ্চাদের স্টাইল করার পক্ষে কি সমর্থন আছে?

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

container:children(8) {
  // style the parent this way if there are 8 children
}

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

Comments

পরিমাণ কোয়েরি এসসিএস মিক্সিন: কোডেপেন.ইও / জাকোব-

— ই

Answer 1

ব্যাখ্যা:

মূল প্রশ্নটিতে পূর্ববর্তী বাক্যগুলির কারণে, কয়েকটি এসও নাগরিক উদ্বেগ প্রকাশ করেছেন যে এই উত্তরটি বিভ্রান্তিকর হতে পারে। মনে রাখবেন, সিএসএস 3-এ, স্টাইলগুলি পিতামাতার নোডে এটি থাকা বাচ্চার সংখ্যার ভিত্তিতে প্রয়োগ করা যাবে না । যাইহোক, শিশুদের নোডগুলিতে তাদের ভাইবোনদের সংখ্যার ভিত্তিতে স্টাইলগুলি প্রয়োগ করা যেতে পারে ।

---

আসল উত্তর:

অবিশ্বাস্যভাবে, এটি এখন সিএসএস 3 খাঁটিভাবে সম্ভব।

/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
    width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

কৌশলটি হ'ল প্রথম বাচ্চাকে বাছাই করা যখন এটি সর্বশেষের শিশু থেকে নবমও হয়। এটি কার্যকরভাবে সহোদর সংখ্যার উপর ভিত্তি করে নির্বাচন করে।

এই কৌশলটির জন্য ক্রেডিট আন্ড্রে লুস (আবিষ্কার করা) এবং লিয়া ভারো (পরিশ্রুত) এর কাছে যায়।

আপনি কি শুধু CSS3 পছন্দ করেন না? 😄

কোডপেন উদাহরণ:

• https://codepen.io/mattlubner-the-decoder/pen/ExaQZQR

সূত্র:

• http://andr3.net/blog/post/142 (আন্দ্রে লুস)
• http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ (Lia Verou)

Comments

খুব সহজ। আমি একটি SASS

— মিক্সিন

@ ইয়ানস্টেফি আমি স্রেফ Chrome 45.0.2454.85 (-৪-বিট) এ এটি পরীক্ষা করেছি এবং এটি ভাল কাজ করে ...?

— ম্যাথমেট্যাটিকস

যদি এটি কোডেপে কাজ করে তবে আমার প্রকল্পের সাথে না হয় তবে এটি অবশ্যই আমার দোষ। আমার খারাপ। এই উত্তরটি সঠিক! সঠিক, আমি বলি!

— ইয়ান এস

এটি কেন কাজ করে তা যোগ করে দিতে পারে, কারণ একাধিক ছদ্ম নির্বাচকদের লোকেরা ব্যবহার করেনি (যেমন আমি এখন অবধি ছিলাম;)। এখানে যা ঘটছে তা হ'ল এটি সেই শিশুটিকে বাছাই করে যে একই সময়ে শিশু শুরু থেকে / শীর্ষে এবং চূড়ান্ত y থেকে শেষ পর্যন্ত। এবং তাই এটি কেবলমাত্র কিছু নির্বাচন করে যদি সঠিকভাবে x + y শিশু থাকে।

— লেগোলাস

নোট করুন যে পরিবর্তে :first-child:nth-last-child(1)আপনি ব্যবহার করতে পারেন :only-child।

— অ্যাডাম রেইস

Answer 2

না, আচ্ছা না। এমন কয়েকজন নির্বাচক রয়েছে যা আপনাকে কিছুটা কাছাকাছি আনতে পারে, তবে সম্ভবত আপনার উদাহরণে কাজ করবে না এবং সেরা ব্রাউজারের সামঞ্জস্যতা নেই।

:only-child

:only-childঅর্থে কয়েক সত্য কাউন্টিং নির্বাচকরা এক এটি যখন উপাদান এর অভিভাবক এক সন্তান শুধুমাত্র প্রয়োগ নেই। আপনার আদর্শিক উদাহরণ ব্যবহার করে, এটি children(1)সম্ভবত এটির মতো কাজ করে ।

:nth-child

:nth-childআপনি কোথায় আপনি কি সত্যিই করতে খুঁজছেন কি উপর নির্ভর করে যেতে চান নির্বাচক আসলে আপনি পেতে পারেন। যদি 8 টি শিশু থাকে তবে আপনি যদি সমস্ত উপাদানকে স্টাইল করতে চান তবে আপনার ভাগ্যের বাইরে of তবে, আপনি যদি 8 তম এবং পরবর্তী উপাদানগুলিতে শৈলী প্রয়োগ করতে চান তবে এটি চেষ্টা করুন:

p:nth-child( n + 8 ){
    /* add styles to make it pretty */
}

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

সিউডো-ক্লাসে ডাব্লু 3 সিএসএস 3 স্পেস

সম্পাদনা আমি আপনার প্রশ্নটি একটু অন্যভাবে পড়ি - পিতামাতাকে স্টাইল করার আরও কয়েকটি উপায় রয়েছে , বাচ্চাদের নয়। আমাকে কয়েকজন নির্বাচককে আপনার উপায়ে ফেলে দিন:

:empty এবং :not

এই শৈলীর উপাদানগুলির কোনও সন্তান নেই। এটি নিজস্বভাবে কার্যকর নয়, তবে যখন :notনির্বাচকের সাথে জুটি বেঁধে দেওয়া হয় , আপনি কেবল সেই উপাদানগুলিকেই স্টাইল করতে পারেন যার সন্তান রয়েছে:

div:not(:empty) {
    /* We know it has stuff in it! */
}

খাঁটি সিএসএসের সাথে কতগুলি শিশু উপলব্ধ তা আপনি গণনা করতে পারবেন না তবে এটি অন্য একটি আকর্ষণীয় নির্বাচক যা আপনাকে শীতল জিনিসগুলি করতে দেয়।

Comments

মূল প্রশ্নটি সম্পাদিত হয়েছিল, এটি প্রাথমিকভাবে "না" কে কিছুটা বিভ্রান্তিমূলক (কেবলমাত্র ফাই 😛)

— রেন্ডার করে

Answer 3

দ্রষ্টব্য: এই সমাধানটি নির্দিষ্ট দৈর্ঘ্যের সেটগুলির বাচ্চাদের ফিরিয়ে দেবে, আপনি যেমনটি চেয়েছিলেন তেমন প্যারেন্ট উপাদান নয়। আশা করি, এটি এখনও কার্যকর।

আন্দ্রে লুইস একটি পদ্ধতি নিয়ে এসেছিলেন: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ দুর্ভাগ্যক্রমে, এটি কেবল আইই 9 এবং তার উপরের কাজ করে।

মূলত, আপনি একত্রিত করুন: নবম-শিশু () অন্যান্য সিউডো ক্লাসগুলির সাথে যা কোনও উপাদানের অবস্থান নিয়ে কাজ করে। এই পদ্ধতির সাহায্যে আপনাকে উপাদানগুলি নির্দিষ্ট করতে দেয় নির্দিষ্ট দৈর্ঘ্যের উপাদানগুলির সেট ।

উদাহরণস্বরূপ, :nth-child(1):nth-last-child(3)সেটটির প্রথম তৃতীয় উপাদান থাকা অবস্থায় একটি সেটে প্রথম উপাদানটির সাথে মিল রয়েছে। এটি দুটি কাজ করে: গ্যারান্টি দেয় যে সেটে কেবল তিনটি উপাদান রয়েছে এবং আমাদের তিনটির মধ্যে প্রথমটি রয়েছে। তিনটি উপাদান সেটটির দ্বিতীয় উপাদানটি নির্দিষ্ট করতে, আমরা ব্যবহার করব :nth-child(2):nth-last-child(2)।

উদাহরণ 1 - সেটটিতে তিনটি উপাদান থাকলে সমস্ত তালিকা উপাদান নির্বাচন করুন:

li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
}

লেয়া ভেরু থেকে 1 বিকল্প উদাহরণ :

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

উদাহরণ 2 - তিনটি তালিকার উপাদান সহ সেটটির শেষ উপাদানটিকে লক্ষ্য করুন:

li:nth-child(3):last-child {
    /* I'm the last of three */
}

উদাহরণ 2 বিকল্প:

li:nth-child(3):nth-last-child(1) {
    /* I'm the last of three */
}

উদাহরণ 3 - চারটি তালিকার উপাদান সহ সেটটির দ্বিতীয় উপাদানটিকে লক্ষ্য করুন:

li:nth-child(2):nth-last-child(3) {
    /* I'm the second of four */
}

Comments

আবার, এটি ভাইবোনের সংখ্যা, শিশু নয়

— টিএমএস

@ টিএমএস স্বীকৃত উত্তরের সম্পাদনাটি দেখুন - ওপি-র প্রশ্নটি

— বিশ্রীভাবে

এই পদ্ধতির জন্য উপযুক্ত যখন তালিকার তার অবস্থানের উপর ভিত্তি করে প্রতিটি উপাদানকে আলাদাভাবে স্টাইল করা দরকার, যেমন এমনকি বিজ্ঞপ্তি রূপান্তর পেতে: li:nth-child(3):nth-last-child(1) { transform: rotate(120deg); } li:nth-child(2):nth-last-child(2) { transform: rotate(240deg); }এবং আরও ...

— গ্রেগ স্মিথ

Answer 4

ম্যাট এর সমাধান থেকে কাজ করে, আমি নিম্নলিখিত কম্পাস / এসসিএসএস বাস্তবায়ন ব্যবহার করেছি used

@for $i from 1 through 20 {
    li:first-child:nth-last-child( #{$i} ),
    li:first-child:nth-last-child( #{$i} ) ~ li {
      width: calc(100% / #{$i} - 10px);
    }
  }

এটি আপনাকে আইটেমের সংখ্যা দ্রুত প্রসারিত করতে দেয়।

Comments

এর পরিবর্তে আপনি সহজেই ফ্লেক্সবক্স ব্যবহার করতে পারেন…

— মাইচা মিস্জিজিজিন

Answer 5

হ্যাঁ আমরা নবম-সন্তানের মতো এটি ব্যবহার করতে পারি

div:nth-child(n + 8) {
    background: red;
}

এটি অষ্টম ডিভের শিশুটির পরে লাল হয়ে যাবে। আশাকরি এটা সাহায্য করবে...

এছাড়াও, যদি কেউ কখনও বলেন "আরে, তারা স্টাইলযুক্ত সিএসএস ব্যবহার করে করা যাবে না, জেএস ব্যবহার করুন !!!" তাদের সাথে সাথে সন্দেহ করুন them সিএসএস আজকাল অত্যন্ত নমনীয়

উদাহরণ :: http://jsfiddle.net/uWrLE/1/

উদাহরণস্বরূপ প্রথম 7 শিশু নীল, তারপরে 8 টি লাল ...

Comments

দুর্ভাগ্যজনক সহায়তার অভাব সম্পর্কে সম্ভবত একটি নোট যুক্ত করবেন ?

— বেনেস

আমি মনে করি না ব্রোডি ঠিক এটিই জিজ্ঞাসা করছে - এটি একটি নির্দিষ্ট পরিমাণের পরে বাচ্চাদের স্টাইল করবে তবে পূর্বপুরুষ / তার সন্তানের সংখ্যার ভিত্তিতে উপাদান যুক্ত করতে পারবে না।

— বেন হাল

এটি আসলে বেশ কিছু ভাল তথ্য যদিও ধন্যবাদ অ্যালান কিন্তু মৌমাছি ঠিক আছে, আমি বলার চেষ্টা করছিলাম "যদি কোনও উপাদানটিতে আমাদের অনেক শিশুদের এই স্টাইল থাকে" যদি আমি ভুল না করি তবে আপনার পদ্ধতিটি 8 ম সন্তানের উপর স্টাইল করবে তবে প্রথম 7 একাকী এবং নগ্ন হবে।

— ব্রোডি

@ প্রাইম্যাটোলজি - একমাত্র ব্রাউজার যা নবম-সন্তানের সমর্থন করে না, এটি হ'ল <9। অন্যরা সবাই এটিকে দুটি বা আরও বেশি সংস্করণ সমর্থন করে আসছে।

— রব

-1 এটি ডিভ শিশুকে লাল করে তুলবে না, এটি তার ভাইবোনদের মধ্যে তার সংখ্যার ভিত্তিতে ডিভ লাল করবে ! ডিভের সন্তানের সাথে কোনওভাবেই সম্পর্কিত নয়!

— টিএমএস

Answer 6

আপনি যদি এটি খাঁটি সিএসএসে করতে চলেছেন (স্ক্যাস ব্যবহার করে) তবে একই প্যারেন্ট ক্লাসের মধ্যে আপনার বিভিন্ন উপাদান / শ্রেণি রয়েছে তবে আপনি এই সংস্করণটি ব্যবহার করতে পারেন !!

  &:first-of-type:nth-last-of-type(1) {
    max-width: 100%;
  }

  @for $i from 2 through 10 {
    &:first-of-type:nth-last-of-type(#{$i}),
    &:first-of-type:nth-last-of-type(#{$i}) ~ & {
      max-width: (100% / #{$i});
    }
  }

Answer 7

না, সিএসএসে এর মতো কিছুই নেই। আপনি তবে জাভাস্ক্রিপ্ট ব্যবহার করে বাচ্চাদের সংখ্যা গণনা করতে এবং স্টাইল প্রয়োগ করতে পারেন।

Comments

@ লাবনাঃ আপনি কেন এটি সত্য বলে ব্যাখ্যা করতে পারবেন?

— গ্যাব্রিয়েল