সিএসএস সিউডো-উপাদানগুলির সংমিশ্রণ, ": পরে" ": শেষ সন্তান"

122

আমি CSS ব্যবহার করে "ব্যাকরণগতভাবে সঠিক" তালিকাগুলি তৈরি করতে চাই। আমার এ পর্যন্ত যা আছে:

<li>তাদের কে ট্যাগ পর কমা দিয়ে অনুভূমিকভাবে প্রদর্শন করা হয়।

li { display: inline; list-style-type: none; }

li:after { content: ", "; }

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

li:last-child li:before { content: "and "; }

li:last-child li:after { content: "."; }

আমি এই কাজটি কীভাবে করব?

css

— ডেরেক
সূত্র

4

আপনি সত্যিই এই জন্য সিএসএস ব্যবহার করা উচিত নয়।

— ফানকি ডুড

2

আমি অবশ্যই ফানকি ডুডের সাথে কিছুটা রাজি হই। এইচটিএমএল (বা কোডবিহীন যদি এটি সরল এইচটিএমএল এর চেয়ে বেশি হয়) তে এটি করা ভাল। সিএসএস বিন্যাসের জন্য :)

— জাইফ্র্যাক্স

16

আমি ... ব্যক্তিগতভাবে, তর্ক করতে চাই যে, একটি তালিকার মধ্যে, বিন্যাসটি প্রয়োজনের নয়, নব্বইটি। সিএসএস ব্যবহারের ক্ষেত্রে এটি এইচটিএমএল বা সার্ভার-সাইড কোডিং ব্যবহারের চেয়ে তালিকা থেকে আরও সাধারণ সংযোজন বা অপসারণের অনুমতি দেয়। তবে আমি এরকমই আজব, কখনও কখনও, এবং, সত্যই ymmv, ইত্যাদি ... =)

— ডেভিড মনিকাকে

9

এবং অক্সফোর্ড কমা ব্যবহারের জন্য +1! :)

— ব্র্যান্ডন রোডস

5

"অক্সফোর্ড কমা জন্য +1" এর জন্য +1। এটি সম্পর্কে কখনও শুনিনি (আমি নেটিভ নই)। তবে দ্রুত উইকির অনুসন্ধানে এটি প্রাকৃতিক বলে, কারণ এটি বহু ভাষায় ব্যবহৃত হয় না। মজাদার কী স্ট্যাক-গুগলিং সিএসএস সমস্যাগুলি শিখতে পারে;)

— jakub.g

168

এটি কাজ করে :) (আমি আশা করি মাল্টি ব্রাউজার, ফায়ারফক্স এটি পছন্দ করে)

li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }

<html>
  <body>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </body>
</html>

স্নিপেট প্রসারিত করুন

— Zyphrax
সূত্র

2

অনুরূপ সমস্যা হ'ল আপনি যেখানে পাইপের অক্ষরের সাথে মেনু আইটেমগুলি পৃথক করছেন। একই সমাধান কাজ করে। তবে, চূড়ান্ত বিষয়বস্তু বৈশিষ্ট্যটি চূড়ান্ত পাইপের চরিত্রটি মুছে ফেলার জন্য {সামগ্রী: কিছুই নয় to সেট করা দরকার।

— aridlehoover

2

অর্ডারও গুরুত্বপূর্ণ। li:last-child:afterকাজ করে কিন্তু li:after:last-childনা।

— রিচার্ড অায়োট

1

মনে রাখবেন যে :last-childCSS3 বৈশিষ্ট্যের সাথে সম্পর্কিত নয়, তাই এটি IE8 এবং পূর্ববর্তী সংস্করণগুলি দ্বারা সমর্থিত নয়।

— চথুলহু

23

<মেনু> উপাদানগুলিতে তালিকা আইটেমের জন্য আমি এটি পছন্দ করি। নিম্নলিখিত মার্কআপ বিবেচনা করুন:

<menu>
  <li><a href="/member/profile">Profile</a></li>
  <li><a href="/member/options">Options</a></li>
  <li><a href="/member/logout">Logout</a></li>
</menu>

আমি নিম্নলিখিত সিএসএস দিয়ে এটি স্টাইল:

menu > li {
  display: inline;
}

menu > li::after {
  content: ' | ';
}

menu > li:last-child::after {
  content: '';
}

এটি প্রদর্শিত হবে:

Profile | Options | Logout

মার্টিন অ্যাটকিনস তাঁর মন্তব্যে যা ব্যাখ্যা করেছিলেন, তার কারণেই এটি সম্ভব

নোট করুন যে সিএসএস 2 এ আপনি ব্যবহার করবেন :after, না ::after। আপনি যদি সিএসএস 3 ব্যবহার করেন তবে ::after(দুটি আধা-কলাম) ব্যবহার করুন কারণ ::afterএটি ছদ্ম-উপাদান (সিঙ্গল-ক্লাসের জন্য একটি একক আধা-কলাম)।

— গ্যাব্রিয়েল হাটক্লোক
সূত্র

16

একটি পুরানো থ্রেড, তবুও কেউ এ থেকে উপকৃত হতে পারে:

li:not(:last-child)::after { content: ","; }
li:last-child::after { content: "."; }

এটি CSS3 এবং [অপরিবর্তিত] সিএসএস 2 এ কাজ করা উচিত।

— user5341733
সূত্র

11

আপনি ছদ্ম-উপাদান একত্রিত করতে পারেন ! দুঃখিত বন্ধুরা, আমি প্রশ্নটি পোস্ট করার পরে এই বিষয়টি নিজেই বের করেছিলাম। সামঞ্জস্যতার কারণে এটি কম ব্যবহৃত হয়।

li:last-child:before { content: "and "; }

li:last-child:after { content: "."; }

এটি সাঁতার কাটতে কাজ করে। সিএসএস এক ধরণের আশ্চর্যজনক।

— ডেরেক
সূত্র

12

এটি কিছুটা "নিট-পিকারের কোণ", তবে "শেষ-শিশু" আসলে ছদ্ম- শ্রেণি , যখন "পূর্বে" এবং "পরে" ছদ্ম-উপাদান elements পার্থক্যটি হ'ল একটি ছদ্ম-শ্রেণি বিদ্যমান উপাদানগুলির জন্য অতিরিক্ত বাধা, অন্যদিকে সিউডো-এলিমেন্টটি কার্যকরভাবে উপস্থাপনা গাছটিতে সম্পূর্ণ নতুন উপাদান যা এইচটিএমএল এর পরিবর্তে সিএসএসে তৈরি হয়েছিল। আপনি এই কারণে এগুলি একত্রিত করতে পারেন: এটি last-childহল একটি সংশোধক liএবং তারপরে আপনি liসর্বশেষ বাচ্চাদের সমস্ত উপাদান নির্বাচন করার পরে আপনি প্রত্যেকের আগে এবং পরে একটি নতুন উপাদান নির্বাচন করেন (এবং স্পষ্টতই তৈরি করতে পারেন)।

— মার্টিন অ্যাটকিন্স

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

— ম্যাট ওয়াগনার

6

শুধু উল্লেখ করতে, সিএসএস 3 এ

: পর

এটি ব্যবহার করা উচিত

:: পর

Https : //developer.mozilla.org/de/docs/Web/CSS/ ::: এর পরে :

সিউডো-ক্লাস এবং সিউডো-এলিমেন্টের মধ্যে বৈষম্য প্রতিষ্ঠার জন্য সিএসএস 3-এ নোটেশন-এর পরে প্রবর্তন করা হয়েছিল। ব্রাউজারগুলি সিটিএস 2 চালু করার পরেও স্বরলিপিটি গ্রহণ করে।

সুতরাং এটি হওয়া উচিত:

li { display: inline; list-style-type: none; }
li::after { content: ", "; }
li:last-child::before { content: "and "; }
li:last-child::after { content: "."; }

— ওল্ফগ্যাং ব্লেসেন
সূত্র

3

ডাবল কোলন ::সিএসএস 3 সিনট্যাক্স সমর্থন করে এমন প্রতিটি ব্রাউজার কেবল সিনট্যাক্সকে সমর্থন করে :, তবে আই 8 কেবলমাত্র সিঙ্গল-কোলন সমর্থন করে, তাই আপাতত সেরা ব্রাউজার সমর্থনের জন্য কেবলমাত্র সিঙ্গল-কোলন ব্যবহার করার পরামর্শ দেওয়া হচ্ছে। ::সিউডো নির্বাচকদের থেকে সিউডো সামগ্রী পৃথক করতে নতুন বিন্যাসটি ইন্ডেন্টেড। আপনার যদি আই 8 সমর্থন প্রয়োজন না হয় তবে দ্বি-কোলনটি নির্দ্বিধায় ব্যবহার করুন। এই নিবন্ধ

— JohnnyQ

2

ব্রাউজ স্ট্যান্ডার্ডের ক্ষেত্রে IE 8 আর খেলোয়াড় নয়। মাইক্রোসফ্ট দ্বারা সমর্থিত নয় এবং এইচটিএমএল 5 বা সিএসএস 3 সমর্থন করে না (সিউডো উপাদানগুলি, রূপান্তরগুলি, ইত্যাদি) আমি এক বছর আগে পর্যন্ত আইই 6 / আই 7-তে ফিরে যাচ্ছি (এর মাধ্যমে) পিছনে-সামঞ্জস্যতার উপর প্রচুর কাজ করতাম মডার্নিজার।) আমরা একটি দীর্ঘ পথ পেরিয়ে এসেছি এবং যদি আপনি নিজের সাইটটির অনলাইন পরিচয় দীর্ঘমেয়াদী - এটি একটি স্বল্পদৃষ্টির সমাধান না হয়েই উপস্থাপনের উদ্দেশ্যে থাকেন - তবে আপনি কেবল আইই 8 ব্যবহার করে কারও কাছ থেকে উপার্জনযোগ্য উপার্জনটি বিবেচনা করুন। নাদা। এমনকি প্রবীণ নাগরিকরা, সময়ের চেয়ে 20 বছর পিছনে, এখন ট্যাবলেট এবং 2-ইন-1 ল্যাপটপ ব্যবহার করছেন।

— স্টিভেন ভেন্টিমিগ্লিয়া

2

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

একজন লেখক: By Adam Smith.

দুজন লেখক: By Adam Smith and Jane Doe.

তিনজন লেখক: By Adam Smith, Jane Doe, and Frank Underwood.

এখানে ইতিমধ্যে প্রদত্ত সমাধানগুলি একজন লেখক এবং 3 বা ততোধিক লেখকের পক্ষে কাজ করেছে তবে দুটি লেখকের ক্ষেত্রে দায়বদ্ধ হওয়া অবহেলা — যেখানে "অক্সফোর্ড কমা" শৈলী (কিছু অংশে "হার্ভার্ড কমা" শৈলী নামেও পরিচিত) প্রয়োগ হয় না doesn't - অর্থাত্, সম্মিলনের আগে কোনও কমা থাকা উচিত নয়।

ঝাঁকুনির এক বিকেলের পরে, আমি নিম্নলিখিতগুলি নিয়ে এসেছি:

<html>
 <head>
  <style type="text/css">
    .byline-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .byline-list > li {
      display: inline;
      padding: 0;
      margin: 0;
    }
    .byline-list > li::before {
      content: ", ";
    }
    .byline-list > li:last-child::before {
      content: ", and ";
    }
    .byline-list > li:first-child + li:last-child::before {
      content: " and ";
    }
    .byline-list > li:first-child::before {
      content: "By ";
    }
    .byline-list > li:last-child::after {
      content: ".";
    }
  </style>
 </head>
 <body>
  <ul class="byline-list">
   <li>Adam Smith</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li><li>Frank Underwood</li>
  </ul>
 </body>
</html>

আমি উপরের হিসাবে এটি বাইলাইনগুলি প্রদর্শন করে।

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

ফিডল এখানে: http://jsfiddle.net/5REP2/

— ম্যাট ওয়াগনার
সূত্র

2

এক, দুই এবং তিনটির মতো কিছু পেতে আপনার আরও একটি সিএসএস শৈলী যুক্ত করা উচিত

li:nth-last-child(2):after {
    content: ' ';
}

এটি দ্বিতীয় শেষ উপাদান থেকে কমা সরিয়ে ফেলবে।

সম্পূর্ণ কোড

li {
  display: inline;
  list-style-type: none;
}

li:after {
  content: ", ";
}

li:nth-last-child(2):after {
  content: '';
}

li:last-child:before {
  content: " and ";
}

li:last-child:after {
  content: ".";
}

<html>

<body>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</body>

</html>

স্নিপেট প্রসারিত করুন

— রাজ শর্মা
সূত্র

0

আমি মিডিয়া ক্যোয়ারিতে একই কৌশলটি ব্যবহার করছি যা কার্যকরভাবে বুলেট তালিকাটিকে ছোট ডিভাইসে একটি ইনলাইন তালিকায় পরিণত করে কারণ তারা স্থান বাঁচায়।

সুতরাং থেকে পরিবর্তন:

তালিকা আইটেম 1
তালিকা আইটেম 2
তালিকা আইটেম 3

প্রতি:

তালিকা আইটেম 1; তালিকা আইটেম 2; তালিকা আইটেম 3।

— user3064058
সূত্র

তিনি সিএসএস দিয়ে এটি করার চেষ্টা করছেন। আপনার পদ্ধতিটি হার্ড কোডড এইচটিএমএল। এই পদ্ধতিটি সাধারণত নেভিগেশন প্রদর্শন করতে ব্যবহৃত হয়।

— স্পারাটান 117