প্রথমটি বাদে সমস্ত 'টিআর' নির্বাচন করুন


257

সিএসএস সহ কোনও টেবিলের trপ্রথমটি বাদে আমি কীভাবে সমস্ত উপাদান নির্বাচন করতে পারি tr?

আমি এই পদ্ধতিটি ব্যবহার করার চেষ্টা করেছি , কিন্তু দেখেছি এটি কার্যকর হয়নি।


1
কোন ব্রাউজারের সাথে এটি সামঞ্জস্য হতে হবে?
পেক্কা


@ পেক্কার প্রশ্নটি গুরুত্বপূর্ণ, কারণ আমি স্ট্যান্ডার্ড সিএসএস ব্যবহার করে এটি করার কোনও উপায়ের কথা ভাবতে পারি না যা আইই এর বিভিন্ন সংস্করণে কাজ করবে। আপনার যদি আইই সমর্থন করার প্রয়োজন হয় তবে একমাত্র কার্যক্ষম সমাধান হ'ল প্রথম <tr>শ্রেণীর এবং বাকি অংশগুলির জন্য একটি পৃথক শ্রেণি।
স্পুডলে

আমি IE সম্পর্কে উদ্বিগ্ন নই তবে এটি এফএফ এবং জিসিতে কাজ করবে

উত্তর:


466

প্রথম trবা তার পরেরগুলির মধ্যে একটি ক্লাস যুক্ত করে tr। আপনারা কেবল সিএসএসের সাহায্যে সারিগুলি বেছে নেওয়ার কোনও ক্রসব্রোজার উপায় নেই।

তবে, আপনি যদি ইন্টারনেট এক্সপ্লোরার 6, 7 বা 8 এর বিষয়ে চিন্তা না করেন:

tr:not(:first-child) {
    color: red;
}

18
আমিও tr:not(:first-of-type)সম্ভাব্য সমাধান হিসাবে উল্লেখ করতে চাই , যদি আপনি প্রথম সাধারণীকরণকৃত সন্তানের পরিবর্তে কোনও নির্দিষ্ট নির্বাচকের প্রথম সন্ধান করেন।
জোশুয়া বার্নস

2
আমি মনে করি 2019 সালে আমরা আইই দিয়ে শেষ করেছি (আই 6 এর
আইএম 10

227

আমি অবাক হয়েছি কেউ ভাইবোন সংযুক্তকারীগুলির ব্যবহারের কথা উল্লেখ করেনি, যা আই 7 এবং এর পরে সমর্থিত:

tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */

তারা উভয়ই ঠিক একইভাবে কাজ করে (যেভাবেই এইচটিএমএল টেবিলের প্রসঙ্গে):

tr:not(:first-child)

1
অপেক্ষা করুন ... এটি কীভাবে গ্রহণযোগ্য উত্তর হওয়া উচিত? আপনি এই বিবৃতিটি থেকে "প্রথমে সমস্ত কিছুই না" পেতে পারেন না, যা ওপি জিজ্ঞাসা করছে। tr + tr আপনাকে একটি একক উপাদান দেবে। আমি অনুমান করি যে ট্র্যাকটি আপনি সবাইকে পেয়ে যাবেন (আমার ধারণা পিতা-মাতার মতো: প্রথম-সন্তানের মতো), তবে
বাক্যবৈজ্ঞানিকভাবে পড়ার

5
@ হাইবো: ট্র + টিআর আপনাকে এমন কোনও ট্রাই পাবেন যা সরাসরি অন্য ট্রাকে অনুসরণ করে। আপনার যদি তিনটি সারি সহ একটি টেবিল থাকে তবে তৃতীয় সারিটি সরাসরি দ্বিতীয় সারি অনুসরণ করে, সুতরাং এটিও মিলবে। আপনি কেবলমাত্র তার পরিবর্তে ট্র: প্রথম-শিশু + টি ব্যবহার করলে আপনি একটি একক উপাদান পাবেন। + এবং between এর মধ্যে একমাত্র পার্থক্য হ'ল two উল্লিখিত দুটির মধ্যে যে কোনও সংখ্যক অন্যান্য উপাদানকে অনুমতি দেয়।
বোল্টক্লক

কেবল যোগ করতে চেয়েছিলেন, elem + elemআপনি যে উপাদানগুলিকে টার্গেট করতে চান তা কেবলমাত্র শিশুদের নয় যখন এটির জন্য একটি দুর্দান্ত সাধারণ সমাধান। উদাহরণস্বরূপ, যদি একটি <h2>বেশ কয়েকটি <p>ট্যাগ অনুসরণ করে তবে প্রথম<p> সেই ক্ষেত্রে প্রথমটি প্রথম সন্তানের নয়।
অসন্তুষ্ট গোয়াট

27

আদর্শ সমাধান তবে IE তে সমর্থিত নয়

tr:not(:first-child) {css}

দ্বিতীয় সমাধানটি হ'ল সমস্ত টিআর স্টাইল করা এবং তারপরে প্রথম সন্তানের জন্য সিএসএস দিয়ে ওভাররাইড করা:

tr {css}
tr:first-child {override css above}

10

আপনি যে 'প্রথম লাইনটির' কথা বলছেন তা হ'ল এটি হ'ল আপনার টেবিল-শিরোনাম - সুতরাং আপনার ব্যবহার সম্পর্কে theadএবং tbodyআপনার মার্কআপে ( এখানে ক্লিক করুন ) যা ভাবতে হবে যা 'আরও ভাল' মার্কআপের জন্য তৈরি করবে (শব্দার্থগতভাবে সঠিক, স্ক্রিনডারদের মতো জিনিসগুলির জন্য দরকারী) ) এবং সহজ, সিএসএস-নির্বাচনের জন্য ক্রস-ব্রাউজার-বান্ধব সম্ভাবনা ( table thead ... { ... })


3

যদিও প্রশ্নের ইতিমধ্যে একটি শালীন উত্তর রয়েছে, আমি কেবল জোর দিয়ে বলতে চাই যে :first-childট্যাগটি শিশুদের প্রতিনিধিত্ব করে এমন আইটেমের ধরণে চলে।

উদাহরণস্বরূপ, কোডে:

<div id"someDiv">
     <input id="someInput1" /> 
     <input id="someInput2" />
     <input id="someInput2" />
</div

আপনি যদি মার্জিনের সাথে কেবলমাত্র দ্বিতীয় দুটি উপাদানকে প্রভাবিত করতে চান তবে প্রথমটি নয়, আপনি যা করবেন:

#someDiv > input {
     margin-top: 20px;
}
#someDiv > input:first-child{
     margin-top: 0px;
}

এটি হ'ল যেহেতু inputএস বাচ্চারা, আপনি first-childনির্বাচকটির ইনপুট অংশে রাখবেন।


1

দুঃখিত, আমি জানি এটি পুরানো তবে কেন আপনি সমস্ত টিআর এলিমেন্টকে প্রথমে চান এবং স্টুডো ক্লাসটি ব্যবহার না করে সেভাবে স্টাইল করবেন না: প্রথম বাচ্চা যেখানে আপনি সমস্ত টিআর উপাদানগুলির জন্য নির্দিষ্ট করেছেন তা প্রত্যাহার করেন।

এই উদাহরণ দ্বারা বর্ণিত ভাল:

http://jsfiddle.net/DWTr7/1/

tr {
    border-top: 1px solid;
}
tr:first-child {
    border-top: none;   
}

/ Patrik


1

যেহেতু tr:not(:first-child)আইই 6, 7, 8 দ্বারা সমর্থিত নয় 8.. আপনি jQuery এর সহায়তা ব্যবহার করতে পারেন। আপনি এটি এখানে খুঁজে পেতে পারেন




-1

আপনি নিজের সিএসএসে সিউডো ক্লাস সিলেক্টরটি এর মতো ব্যবহার করতে পারেন:

.desc:not(:first-child) {
    display: none;
}

এটি ক্লাসটি প্রথম উপাদানটিতে ক্লাস প্রয়োগ করবে না .ডেস্ক।

এখানে একটি জেএসফিটাল একটি উদাহরণ রয়েছে: http://jsfiddle.net/YYTFT/ , এবং এটি ছদ্ম শ্রেণীর নির্বাচকদের ব্যাখ্যা করার জন্য একটি ভাল উত্স: http://css-tricks.com/pseudo-class-selectors/


1
এটি প্রথম উপাদান, বিন্দুতে শৈলীটি প্রয়োগ করবে না। first-childক্লাস উপেক্ষা।
ফেজ ভ্রাস্টা

-3

আপনি নিজের ক্লাস তৈরি করতে এবং ক্লাসটি ব্যবহার করতে পারবেন যখন আপনি নিজের ভবিষ্যতের যেগুলি সিএসএস দ্বারা নির্বাচিত হতে চান (বা চান না) এর সমস্ত সংজ্ঞা দেয়।

এটি লেখার মাধ্যমে করা হবে

<tr class="unselected">

এবং তারপরে আপনার CSS তে লাইনগুলি রয়েছে (এবং উদাহরণ হিসাবে টেক্সট-সারিবদ্ধ কমান্ডটি ব্যবহার করে):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}

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