নয়: প্রথম সন্তানের নির্বাচক

Question

আমার divবেশ কয়েকটি ulট্যাগ সমন্বিত একটি ট্যাগ রয়েছে ।

আমি ulকেবল প্রথম ট্যাগের জন্য সিএসএসের বৈশিষ্ট্যগুলি সেট করতে সক্ষম হয়েছি :

div ul:first-child {
    background-color: #900;
}

যাইহোক, ulপ্রথমটি কাজ না করে বাদে একে অপরের ট্যাগের জন্য CSS বৈশিষ্ট্য নির্ধারণের জন্য আমার নিম্নলিখিত প্রচেষ্টাগুলি :

div ul:not:first-child {
    background-color: #900;
}

div ul:not(:first-child) {
    background-color: #900;
}

div ul:first-child:after {
    background-color: #900;
}

আমি কীভাবে সিএসএসে লিখতে পারি: "প্রতিটি উপাদান প্রথমটি বাদে"?

Answer 1

সংস্করণ আপনি পোস্ট এক আসলে কাজ করে সব আধুনিক ব্রাউজারে (যেখানে জন্য CSS সিলেক্টর স্তর 3 করছে সমর্থিত ):

div ul:not(:first-child) {
    background-color: #900;
}

যদি আপনার লিগ্যাসি ব্রাউজারগুলি সমর্থন করতে হয় বা আপনি যদি :notনির্বাচকের সীমাবদ্ধতার দ্বারা বাধা পান (এটি কেবল একটি সাধারণ নির্বাচককে তর্ক হিসাবে স্বীকৃতি দেয় ) তবে আপনি অন্য কৌশলটি ব্যবহার করতে পারেন:

কোনও নিয়ম সংজ্ঞায়িত করুন যা আপনি যা চান তার চেয়ে বেশি সুযোগ রয়েছে এবং তারপরে এটি আপনি কী চান তা সীমাবদ্ধ রেখে শর্তাধীন "বাতিল" করুন:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

সুযোগ সীমাবদ্ধ করার সময় আপনি যে সিএসএস অ্যাট্রিবিউটটি সেট করছেন তার জন্য ডিফল্ট মানটি ব্যবহার করুন ।

Comments

আপনি কি জানেন ঠিক কোন সংস্করণে এটি সমর্থিত নয়?

— সাইমন_উইভার

@ সিমন_উইভার: অনুশীলনে সমস্ত কিছু ছাড়া আই <9 এটি সমর্থন করে। এই জাতীয় তথ্য পেতে একটি দুর্দান্ত সংস্থান হ'ল caniuse.com ।

— জন

হুম .. প্রথম সমাধানের বিধিনিষেধের দিকে নজর রাখুন : ক্যানিউজ :: #feat=css-not-sel-list দ্বিতীয়টি আমার পক্ষে আরও যুক্তিসঙ্গত বলে মনে হয়েছিল। ধন্যবাদ!

— ইওরাহ

@ ওরিরাহ আপনার ক্যানিউজ লিঙ্কটি নির্বাচকদের তালিকার জন্য, এবং হ্যাঁ, সমর্থনটি এখনও খুব সীমিত। ওপি নির্বাচকদের একটি তালিকা ব্যবহার করছে না। সুতরাং আমি মনে করি যে আইই 8 এর দিনগুলি ছাড়িয়ে https://caniuse.com/#feat=css-sel3 দুর্দান্ত সমর্থন সহ আরও উপযুক্ত।

— 13:48

এটি ক্রোমের শুরুতে ডিভ উপাদান ছাড়াই কাজ করে।

— আছরাফ জেদাই

Answer 2

এই সিএসএস 2 সমাধান ("একের ulপর এক ul" )ও কাজ করে এবং আরও ব্রাউজার দ্বারা সমর্থিত।

div ul + ul {
  background-color: #900;
}

এর বিপরীতে :notএবং :nth-sibling, সংলগ্ন ভাই-বোন নির্বাচনকারী আইআই + + দ্বারা সমর্থিত।

পৃষ্ঠাটি লোড হওয়ার পরে আপনার যদি জাভাস্ক্রিপ্ট এই বৈশিষ্ট্যগুলি পরিবর্তন করে থাকে তবে আপনার এটির আই 7 এবং আই 88 বাস্তবায়নের কয়েকটি জ্ঞাত বাগ দেখতে হবে । এই লিঙ্কটি দেখুন ।

যে কোনও স্থির ওয়েব পৃষ্ঠার জন্য, এটি পুরোপুরি কার্যকর হওয়া উচিত।

Comments

@ লেভেন: এই মাতাল লিংকটি বলছে এটি আই 7-তে কাজ করা উচিত, তবে কেবল স্থিতিশীলভাবে। যদি আপনার জেএস এর সামনে অন্য উপাদান রাখে তবে এটি সঠিকভাবে আপডেট করা যাবে না। আপনি কি এই ইস্যুটি দেখেছেন?

— অ্যালেক্স কুইন

লক্ষণীয় যে ul ul div ulএই জাতীয় উপাদানগুলির ক্রম অনুসারে: (যেখানে এই উপাদানগুলি সহোদর হয়), কেবলমাত্র দ্বিতীয় উলটি নির্বাচন করা হবে, যেহেতু ul

— ব্রায়ান এইচ

Answer 3

যেহেতু আই 6-8:not দ্বারা গৃহীত হয় না , তাই আমি আপনাকে এটি প্রস্তাব করব:

div ul:nth-child(n+2) {
    background-color: #900;
}

সুতরাং আপনি প্রথমটি বাদেul প্রতিটিটিকে তার মূল উপাদানটিতে বেছে নিন ।

ক্রিস Coyer এর পড়ুন : "n তম সন্তান রেসিপি দরকারী" আরো জন্য নিবন্ধ nth-child উদাহরণ ।

Comments

কে এখনও 2019 সালে এখনও IE6-8 ব্যবহার করে?

— oldboy

উত্তর বিবেচনা 2013 থেকে ছিল?

— আসুকুকসুকি

Answer 4

div li~li {
    color: red;
}

আই 7 সমর্থন করে

Answer 5

not(:first-child)আর কাজ করবে বলে মনে হচ্ছে না। কমপক্ষে Chrome এবং ফায়ারফক্সের আরও সাম্প্রতিক সংস্করণগুলির সাথে।

পরিবর্তে, এটি চেষ্টা করুন:

ul:not(:first-of-type) {}

Comments

তারা উভয়ই কাজ করে তবে তাদের অর্থ আলাদা। ul:not(:first-child)আক্ষরিক অর্থে "এমন কোনও ulউপাদান যা তার পিতামাতার প্রথম সন্তানের নয়", তাই এটি ulঅন্য উপাদান ( p, শিরোনাম ইত্যাদি) এর আগে থাকলে এটি 1 ম এর সাথেও মেলে না । বিপরীতে, এর ul:not(:first-of-type)অর্থ " পাত্রে ul1 ম ব্যতীত অন্য কোনও উপাদান ul"। আপনি ঠিক বলেছেন যে ওপি সম্ভবত সম্ভবত পরবর্তী আচরণের প্রয়োজন ছিল, তবে আপনার ব্যাখ্যাটি বিভ্রান্তিকর।

— ইলিয়া স্ট্রেলটসিন

Answer 6

আপনি যে কোনও নির্বাচকের সাথে ব্যবহার করতে পারেন not

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}

Answer 7

উপরের কিছুটির সাথে আমার ভাগ্য হয়নি,

এটি কেবলমাত্র আমার জন্য কাজ করেছিল

ul:not(:first-of-type) {}

এটি যখন আমার পৃষ্ঠায় প্রদর্শিত প্রথম বোতামটি মার্জিন-বাম বিকল্প দ্বারা প্রভাবিত না করার চেষ্টা করা হয়েছিল তখন আমার পক্ষে কাজ হয়েছিল।

এই বিকল্পটি আমি প্রথমে চেষ্টা করেছিলাম কিন্তু এটি কার্যকর হয়নি

ul:not(:first-child)

Answer 8

আপনি আপনার নির্বাচককে :notপছন্দ মতো বেলো দিয়ে ব্যবহার করতে পারেন আপনি এর মধ্যে যে কোনও নির্বাচক ব্যবহার করতে পারেন:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

আপনি :notপিতামাতা নির্বাচক ছাড়াও ব্যবহার করতে পারেন ।

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

আরও উদাহরণ

any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}

Answer 9

আমি ul:not(:first-child)যেমন ব্যবহার করেছি তেমনি একটি নিখুঁত সমাধান।

div ul:not(:first-child) {
    background-color: #900;
}

কেন এটি নিখুঁত কারণ ব্যবহার করে ul:not(:first-child)আমরা অভ্যন্তরীণ উপাদানগুলিতে সিএসএস প্রয়োগ করতে পারি। li, img, span, aট্যাগ ইত্যাদির মতো

কিন্তু যখন অন্যদের সমাধানগুলি ব্যবহার করা হয়:

div ul + ul {
  background-color: #900;
}

এবং

div li~li {
    color: red;
}

এবং

ul:not(:first-of-type) {}

এবং

div ul:nth-child(n+2) {
    background-color: #900;
}

এগুলি কেবল উল স্তরের সিএসএসকে সীমাবদ্ধ করে। মনে করুন আমরা সিএসএসকে li'ডিভ উল + উল লি' হিসাবে প্রয়োগ করতে পারি না ।

অভ্যন্তরীণ স্তরের উপাদানগুলির জন্য প্রথম সমাধানটি পুরোপুরি কার্যকর হয়।

div ul:not(:first-child) li{
        background-color: #900;
    }

এবং তাই ...