একটি সারিতে প্রথম এবং শেষ টিডি কীভাবে নির্বাচন করবেন?


170

আপনি প্রথম এবং শেষ TDসারিতে কীভাবে নির্বাচন করতে পারেন ?

tr > td[0],
tr > td[-1] {
/* styles */
}

উত্তর:


377

আপনি :first-childএবং :last-childছদ্ম-নির্বাচকগুলি ব্যবহার করতে পারেন :

tr td:first-child,
tr td:last-child {
    /* styles */
}

এটি সমস্ত বড় ব্রাউজারগুলিতে কাজ করা উচিত, তবে উপাদানগুলি গতিশীলভাবে যুক্ত করার সময় আই 7 এর কিছু সমস্যা রয়েছে (এবং এটি আই 6 তে কাজ করবে না)।


এবং আপনি যদি দ্বিতীয় ওগ তৃতীয় সন্তান বাছাই করতে চান?
ক্লার্ক

2
এবং কি এর মধ্যে পার্থক্য tr > tdএবং tr td?
ক্লার্ক

নিম্নলিখিত নিয়মটি সমস্ত P উপাদানগুলির শৈলীর তালিকা নির্ধারণ করে যা শরীরের শিশু: শরীর> পি {লাইন-উচ্চতা: 1.3} আপনি দেখতে পারেন: w3.org/TR/CSS2/selector.html#child-setectors (একই পৃষ্ঠা পোস্ট করা হয়েছে) জেমস দ্বারা)
ফ্রান্সেসকো

4
@ ক্লার্ক্ক - >কেবলমাত্র প্রত্যক্ষ বাচ্চাদের বাছাই করে। এটি ব্যতীত সমস্ত বংশধর (যেমন শিশুদের বাচ্চাদের) নির্বাচন করা হবে। ২ য় বা ৩ য় শিশু বাছাই করতে nth-childসিউডো-সিলেক্টরটি দেখুন।
জেমস আলার্ডিস

@ বোল্টক্লক আমি একবার আপনার সমস্যার সমাধান ব্যবহার করে দেখেছি +। এর মতো কিছু tr td + td + .... +td তবে আমি জানি না আমার কতটা টিডি আছে?
রই নমির

19

আপনি নিম্নলিখিত স্নিপেট ব্যবহার করতে পারেন:

  tr td:first-child {text-decoration: underline;}
  tr td:last-child {color: red;}

নিম্নলিখিত সিউডো ক্লাস ব্যবহার করে:

: প্রথম-সন্তানের অর্থ "এটি যদি তার পিতামাতার প্রথম সন্তান হয় তবে এই উপাদানটি নির্বাচন করুন "।

: শেষ সন্তানের অর্থ "এই উপাদানটি যদি তার পিতামাতার শেষ সন্তান হয় তবে এটি নির্বাচন করুন "।

কেবলমাত্র এলিমেন্ট নোডগুলি (এইচটিএমএল ট্যাগগুলি) প্রভাবিত হয়, এই সিউডো-ক্লাসগুলি পাঠ্য নোডগুলি উপেক্ষা করে।


15

আপনি : প্রথম শিশু এবং : শেষ সন্তান pseudo-selectors :

tr td:first-child{
    color:red;
}
tr td:last-child {
    color:green
}

অথবা আপনি অন্য উপায় ব্যবহার করতে পারেন

// To first child 
tr td:nth-child(1){
    color:red;
}

// To last child 
tr td:nth-last-child(1){
    color:green;
}

উভয় উপায় নিখুঁতভাবে কাজ করছে


2

আপনি যদি সাস (স্ক্যাস) ব্যবহার করেন তবে আপনি নিম্নলিখিত স্নিপেট ব্যবহার করতে পারেন:

tr > td{
   /* styles for all td*/
   &:first-child{
     /* styles for first */ 
   }
   &:last-child{
    /* styles for last*/
   }
 }

2

সারিটিতে যদি আপনার এবং নির্বাচকদের ব্যবহার করা উচিত তার thআগে কিছু শীর্ষস্থানীয় (বা পিছনে) ট্যাগ রয়েছে । অন্যথায় প্রথমটি নির্বাচিত হবে না যদি এটি সারিটির প্রথম উপাদান না হয়।td:first-of-type:last-of-typetd

এটি দেয়:

td:first-of-type, td:last-of-type {
    /* styles */
}

1
আপনি আমার সময় বাঁচিয়েছিলেন আমি শেষ বাচ্চাটি ব্যবহার করছি যা কাজ করছে না তবে আপনার সমাধানটি পুরোপুরি কাজ করেছে
মির্জা ওবায়দ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.