এর কি: (সিউডো-ক্লাসে) একাধিক যুক্তি থাকতে পারে না?

745

আমি নির্বাচন করার চেষ্টা করছি inputসব উপাদান typeছাড়া গুলি radioএবং checkbox।

অনেক লোক দেখিয়েছে যে আপনি একাধিক যুক্তি যুক্ত করতে পারেন :notতবে ব্যবহার typeকরে যাইহোক এটি কাজ করে না বলে মনে হচ্ছে try

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

কোন ধারনা?

css css-selectors

— ডেল্ফী
সূত্র

24

"অনেক লোক দেখিয়েছেন যে আপনি এতে একাধিক যুক্তি রাখতে পারেন: না" নয়তো এই লোকেরা একটি নির্দিষ্ট নিবন্ধের উদ্ধৃতি দিচ্ছিল যা জনপ্রিয়ভাবে উল্লেখ করা হয়েছে তবে মারাত্মকভাবে বিভ্রান্তিকর ছিল, বা তারা CSS নয়, jQuery সম্পর্কে কথা বলছিলেন। নোট করুন যে প্রদত্ত নির্বাচকটি আসলে jQuery এ বৈধ, তবে CSS এ নয়। : আমি লিখেছি একটি Q & A- পার্থক্য বিশদ stackoverflow.com/questions/10711730/... (উত্তর এছাড়াও পাশ যে নিবন্ধটি উল্লেখ)

— BoltClock

10

অভিনন্দন! অফিসিয়াল সংস্করণ প্রকাশের আগে আপনি 2 বছর উপরে আপনার উদাহরণে সফলভাবে বৈধ CSS4.0 লিখেছেন।

— জ্যাক গিফিন

1

@ জ্যাক গিফিন: আপনি কোন "অফিসিয়াল সংস্করণ" উল্লেখ করছেন? এই প্রশ্নটি নির্বাচক -4 এর 5 মাসের মধ্যে FPWD এর প্রাক-তারিখ করে, এবং এই অনুমানটি এখনও কোথাও সমাপ্তির কাছাকাছি নেই: w3.org/TR/2011/WD-seteors4-20110929/#negation এবং এটি প্রথম প্রয়োগের প্রাক-তারিখ দ্বারা 4 এবং একটি বছর অর্ধেক : stackoverflow.com/questions/35993727/...

— BoltClock

1535

কেন: কেবল দুটি ব্যবহার করবেন না :not:

input:not([type="radio"]):not([type="checkbox"])

_{হ্যাঁ, এটি ইচ্ছাকৃত}

— ফেলিক্স ক্লিং
সূত্র

4

এটির উচ্চতর বৈশিষ্ট্য রয়েছে।

— আনডিট্রাকশন

63

যারা রসিকতা পান না তাদের জন্য: তিনি :চরিত্রটি দিয়ে "কেন নয় ..." বলেছিলেন ।

— টটিমেডলি

11

পার্শ্ব নোট হিসাবে, আপনি যদি এমন কিছু করেন তবে আপনার input:not('.c1'), input:not('c2')"এবং" পরিস্থিতি শেষ হয় যেখানে উভয় শ্রেণীর সাথে এটি মিলতে পারে।

— ক্লাউডকিলার

3

@ বল্টক্লক বিলম্বিত হয়েছে, তবে তাই :not([attr],[attr])সিএসভি ফর্ম্যাটটির জন্যও ইচ্ছা :

— পি

2

@ ক্লাউডকিলার এমন কোনও ইনপুট উপাদান নির্বাচন করতে পারবেন না -> "ক্লাস সি 1 ছাড়াই ইনপুট বা ক্লাস সি 2 ছাড়াই ইনপুট"

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

48

আপনি যদি আপনার প্রকল্পে SASS ব্যবহার করছেন তবে আমি এই মিশিনটি তৈরি করেছি যাতে আমরা সকলেই এটির মতো কাজ করতে পারি:

@mixin not($ignorList...) {
    //if only a single value given
    @if (length($ignorList) == 1){
        //it is probably a list variable so set ignore list to the variable
        $ignorList: nth($ignorList,1);
    }
    //set up an empty $notOutput variable
    $notOutput: '';
    //for each item in the list
    @each $not in $ignorList {
        //generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
        $notOutput: $notOutput + ':not(#{$not})';
    }
    //output the full :not() rule including all ignored items
    &#{$notOutput} {
        @content;
    }
}

এটি 2 উপায়ে ব্যবহার করা যেতে পারে:

বিকল্প 1: উপেক্ষা করা আইটেমগুলিকে ইনলাইনে তালিকাবদ্ধ করুন

input {
  /*non-ignored styling goes here*/
  @include not('[type="radio"]','[type="checkbox"]'){
    /*ignored styling goes here*/
  }
}

বিকল্প 2: অগ্রাহ্য করা আইটেমগুলিকে প্রথমে একটি চলকটিতে তালিকাবদ্ধ করুন

$ignoredItems:
  '[type="radio"]',
  '[type="checkbox"]'
;

input {
  /*non-ignored styling goes here*/
  @include not($ignoredItems){
    /*ignored styling goes here*/
  }
}

উভয় বিকল্পের জন্য আউটপুট সিএসএস

input {
    /*non-ignored styling goes here*/
}

input:not([type="radio"]):not([type="checkbox"]) {
    /*ignored styling goes here*/
}

— ড্যানিয়েল টনন
সূত্র

6

লাম্বার জ্যাকটি তার কাঠ পাওয়ার পরিবর্তে হার্ডওয়ার স্টোরে যেতে অনুরোধ করার মতো কিনা?

— ওসিরিসগোথর

কি? সুতরাং আপনি বরং নির্বাচন করুন লিখুন: না (। এক): না (.ত্রী): না (.ত্রী): না (। চারটি) {...। নির্বাচনকারী থেকে {@ অন্তর্ভুক্ত নয় ('। এক', ' .tw ','। তিন ','। চার ') {...}}?

— ড্যানিয়েল টোনন

2

দক্ষতার দিক থেকে: হ্যাঁ। কম 'অক্ষর এবং ইমো আরও দক্ষ কোড।

— দান

:not()= প্রতি আইটেম 6 অক্ষর; '',= প্রতি আইটেম 3 অক্ষর। @includeএকটি গরম কীতে বরাদ্দ করা উচিত যাতে আমি এটি একটি অক্ষর হিসাবে গণনা করতে যাচ্ছি (এটি টাইপ করার ক্ষেত্রে)। প্রযুক্তিগতভাবে আমি ভাবি না যে আপনি যদি তাদের এতটা ঘৃণা করেন তবে তালিকার একক উদ্ধৃতি চিহ্নগুলি ব্যবহার করার দরকার নেই। যদিও তারা সম্পাদকদের বাইরে প্রকাশ করা থেকে বিরত রাখতে সহায়তা করে। তার উপর ভিত্তি করে, আমি এখনও আমার উপায় এটি লেখার আরও টাইপিং দক্ষ উপায় বলে মনে করি।

— ড্যানিয়েল টনন

2

@ দানহেস্কে আরও লিখেছেন যে সমস্তগুলি লিখুন: (নয়) কেসগুলি আপনাকে তালিকাভুক্ত করতে কোনও ভেরিয়েবল ব্যবহার করতে দেয় না।

— plong0

30

সিএসএস সিলেক্টর 4 থেকে শুরু করে :notসিলেক্টারে একাধিক যুক্তি ব্যবহার সম্ভব হয় ( এখানে দেখুন )।

সিএসএস 3-তে: নির্বাচক নয় কেবল 1 জন নির্বাচককে যুক্তি হিসাবে অনুমতি দেয়। স্তর 4 নির্বাচকগুলিতে, এটি যুক্তি হিসাবে একটি নির্বাচক তালিকা নিতে পারে।

উদাহরণ:

/* In this example, all p elements will be red, except for 
   the first child and the ones with the class special. */

p:not(:first-child, .special) {
  color: red;
}

দুর্ভাগ্যক্রমে, ব্রাউজার সমর্থন সীমিত । আপাতত, এটি কেবল সাফারিতেই কাজ করে।

— পিটার মাইরেসন
সূত্র

3

ক্যানিউজ ডটকমের তথ্য অনুসারে , এটি এখনও কেবল সাফারি দ্বারা সমর্থিত

— 32-

8

সিএসএস 4 নয়, এর সিএসএস নির্বাচক স্তর 4 মনে রাখবেন, সিএসএস 4 এর মতো কোনও জিনিস নেই এবং সম্ভবত এটি কখনওই থাকবে না।

— এডু রুইজ

8

এটি নিয়ে আমার কিছুটা সমস্যা হয়েছিল এবং "এক্স: না (): না ()" পদ্ধতিটি আমার পক্ষে কাজ করে নি।

আমি এই কৌশলটি অবলম্বন করে শেষ করেছি:

INPUT {
    /* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
    /* styles that reset previous styles */
}

এটি প্রায় মজাদার নয়, তবে এটি যখন আমার জন্য কাজ করেছিল তখন: যখন (না) পৌত্তলিক ছিল। এটি আদর্শ নয়, তবে এটি দৃ solid়।

— eatCasserole
সূত্র

5

আপনি যদি "cssnext" পোস্ট সিএসএস প্লাগইন ইনস্টল করেন তবে আপনি এখনই যে সিনট্যাক্সটি ব্যবহার করতে চান তা নিরাপদে শুরু করতে পারেন।

Cssnext ব্যবহার করে এটি চালু হবে:

input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

এটিতে:

input:not([type="radio"]):not([type="checkbox"]) {
  /* css here */
}

http://cssnext.io/features/#not-pseudo-class

— ড্যানিয়েল টনন
সূত্র