সিএসএস: নয় (: সর্বশেষ-শিশু): নির্বাচকের পরে

368

আমার কাছে উপাদানগুলির একটি তালিকা রয়েছে, যা এই ধরণের স্টাইলযুক্ত:

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

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

সিএসএসের জন্য শেষ উপাদানটি ছাড়া আর কেউ কীভাবে নির্বাচন করবেন জানেন?

আপনি এখানে:not() নির্বাচক সংজ্ঞা দেখতে পারেন

css css-selectors pseudo-element

— ম্যাট ক্লার্কসন
সূত্র

1

এই আচরণটি ক্রোম 10-এ একটি বাগ বলে মনে হচ্ছে এটি ফায়ারফক্স 3.5 তে আমার জন্য কাজ করে।

— ডুরি

6

প্রকৃতপক্ষে সর্বাধিক ক্রোম দিয়ে 2018 এ স্নিপেট চালিয়েছে এবং প্রত্যাশার মতো কাজ করেছে।

— এথোথ

433

যদি এটি নির্বাচক নয় এমন সমস্যা হয় তবে আপনি সেগুলি সেট করে সর্বশেষটিকে ওভাররাইড করতে পারেন

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

বা আপনি যদি আগে ব্যবহার করতে পারেন তবে শেষ সন্তানের প্রয়োজন নেই

li+li:before
{
  content: '| ';
}

— ইমা
সূত্র

12

এটি IE8 এর মতো পিছনে কাজ করার একমাত্র উপায় (দুঃখিত, আই 7 এবং এর আগে কোনও চিতো নেই)। li:not(:first-child):beforeইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণগুলি মোকাবেলা করার জন্য কিছুটা ভয়ঙ্কর।

— স্যান্ডি গিফোর্ড

239

প্রতিটি জিনিসই সঠিক বলে মনে হচ্ছে। আপনি যা ব্যবহার করেছেন তার পরিবর্তে আপনি নিম্নলিখিত সিএসএস নির্বাচকটি ব্যবহার করতে চাইতে পারেন।

ul > li:not(:last-child):after

— বিবেক
সূত্র

4

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

— আর্থার

25

লিখিত হিসাবে আপনার উদাহরণ আমার জন্য ক্রোম 11 এ পুরোপুরি কাজ করে। সম্ভবত আপনার ব্রাউজারটি কেবল :not()নির্বাচককে সমর্থন করে না ?

এই ক্রস ব্রাউজারটি সম্পাদন করার জন্য আপনার জাভাস্ক্রিপ্ট বা অনুরূপ ব্যবহারের প্রয়োজন হতে পারে। jQuery প্রয়োগগুলি : (এর) নির্বাচক এপিআই তে নয়।

— লিজা ডালি
সূত্র

8

আমি এর li:not(:first-child):beforeআগে উল্লম্ব বারটি করে এবং যুক্ত করে এটি সমাধান করেছি । আমি ক্রোমের স্থিতিশীল সংস্করণ নিয়ে কাজ করছি যা দেখে মনে হয় না যে এটি শেষ-সন্তানের সমর্থন করে। ক্যানারি বিল্ড না। উত্তরের জন্য ধন্যবাদ।

— ম্যাট ক্লার্কসন

দেখে মনে হচ্ছে ক্রোম 2013 এ এমনকি এটি সমর্থন করে না?

— মিক্কোপ

20

সিএসএস ব্যবহার করে একটি উদাহরণ

  ul li:not(:last-child){
        border-right: 1px solid rgba(153, 151, 151, 0.75);
    }

— লোরেনা পিটা
সূত্র

20

আমার জন্য এটি ঠিক আছে

&:not(:last-child){
            text-transform: uppercase;
        }

— আছাদ নাসিম
সূত্র

1

এই উত্তরটি সিএসএসের চেয়ে এসএসএসএসের সাথে সম্পর্কিত হতে পারে।

— ক্রিস ওয়ালশ

10

আপনার নমুনা আমার জন্য আইই তে কাজ করে না, আপনাকে বিষয়বস্তু সিএসএস সম্পত্তি ব্যবহারের জন্য আইইতে আপনার পৃষ্ঠাটি স্ট্যান্ডার্ড পদ্ধতিতে রেন্ডার করতে আপনার ডকুমেন্টে ডক্টাইপ শিরোনাম নির্দিষ্ট করতে হবে :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

</html>

দ্বিতীয় উপায় হ'ল সিএসএস 3 নির্বাচক ব্যবহার করা

li:not(:last-of-type):after
{
    content:           " |";
}

তবে আপনার এখনও ডকটাইপ নির্দিষ্ট করতে হবে

এবং তৃতীয় উপায় হ'ল জিকুয়েরিকে নিম্নলিখিত স্ক্রিপ্ট সহ কিছু স্ক্রিপ্ট ব্যবহার করা:

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
      $("li:not(:last)").append(" | ");
    });
</script>

তৃতীয় উপায়ের সুবিধা হ'ল আপনাকে ডক্টাইপ নির্দিষ্ট করতে হবে না এবং jQuery সামঞ্জস্যতার যত্ন নেবে।

— মার্টিন কুনক
সূত্র

6

<! ডক্টইপিএইচটিএমএল> হল নতুন এইচটিএমএল 5 স্ট্যান্ডার্ড।

— ম্যাট ক্লার্কসন

1

এটি মোকাবেলায় এটি দুর্দান্ত এবং আধুনিক উপায়। আমি লড়াই করে যাচ্ছিলাম: শেষ সন্তান, তখন আমি আপনার উত্তরটি পেয়েছি। এই এক নিখুঁত! : নয় (: সর্বশেষ-প্রকারের): পরে

— ফিরজ

1

সর্বশেষ-সন্তানের আগে এবং পরে: ব্যবহার করুন

 ul li:not(last-child){
 content:' |';
}

আশা করি, এটি কাজ করা উচিত

— Jaylukmann
সূত্র

-2

আপনি এটি চেষ্টা করতে পারেন, আমি জানি আপনি যে উত্তরগুলি খুঁজছেন তা নয় তবে ধারণাটি একই is

যেখানে আপনি সমস্ত শিশুদের জন্য শৈলীগুলি সেট করছেন এবং তারপরে এটি সর্বশেষ শিশু থেকে সরিয়ে ফেলছেন।

টুকিটাকি সংকেতলিপি

li
  margin-right: 10px

  &:last-child
    margin-right: 0

ভাবমূর্তি

— যশু মিত্তাল
সূত্র

2

হাই, আমি কি জানতে পারি এই সম্পাদকটি দয়া করে? দেখতে সুন্দর লাগছে।

— Zanecat

এটি কোডের একটি ছোট অংশ এবং যে কেউ সহজেই এটি মুখস্ত করে টাইপ করতে পারে।

— যশু মিত্তাল