আমি কি কোনও সিএসএস নির্বাচককে নির্দিষ্ট শ্রেণি বা বৈশিষ্ট্য না থাকা উপাদান নির্বাচন করে লিখতে পারি?

643

আমি একটি CSS নির্বাচনকারী নিয়ম যে সমস্ত উপাদান আছে যা নির্বাচন লিখতে চাই না একটি নির্দিষ্ট শ্রেণী আছে। উদাহরণস্বরূপ, নিম্নলিখিত এইচটিএমএল দেওয়া হয়েছে:

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

আমি এমন একটি নির্বাচক লিখতে চাই যা এমন সমস্ত উপাদান নির্বাচন করে যেগুলির "মুদ্রণযোগ্য" শ্রেণি নেই, যা এই ক্ষেত্রে, ন্যাভ এবং একটি উপাদান।

এটা কি সম্ভব?

উল্লেখ্য: প্রকৃত HTML যেখানে আমি এই ব্যবহার করতে চান সেটি সেখানে আরো অনেক উপাদান আছে যা হতে যাচ্ছে না চেয়ে "মুদ্রণযোগ্য" শ্রেণী (আমি বুঝি উপরোক্ত উদাহরণের অন্যান্য উপায় কাছাকাছি থাকবে) আছে।

html css css-selectors

— ডেভিড নর্ডভাল
সূত্র

895

সাধারণত আপনি :not()ছদ্ম-শ্রেণিতে যেমন শ্রেণি নির্বাচক যুক্ত করেন :

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

কিন্তু আপনি ভাল ব্রাউজার সমর্থন প্রয়োজন হলে (IE8 এবং বয়স্ক সমর্থন করি না :not()), আপনি উপাদান আছে যা জন্য শৈলী নিয়ম তৈরি বন্ধ সম্ভবত ভালো আছেন না "মুদ্রণযোগ্য" শ্রেণী আছে। আপনি যদি আপনার আসল মার্কআপ সম্পর্কে যা বলেন তা সত্ত্বেও এটি যদি সম্ভব না হয় তবে আপনাকে সেই সীমাবদ্ধতার আশেপাশে আপনার মার্কআপটি কাজ করতে হতে পারে।

মনে রাখবেন যে, বৈশিষ্ট্য উপর নির্ভর করে আপনি এই নিয়ম আছেন সেটিং, তাদের মধ্যে কিছু পারেন উত্তরপুরূষ যে উত্তরাধিকারসূত্রে হতে পারে রাখুন হয় .printable , বা অন্যথায় তাদের একটি উপায় বা অন্য প্রভাবিত। উদাহরণস্বরূপ, যদিও displayউত্তরাধিকার সূত্রে প্রাপ্ত নয় , তবে display: noneএকটি স্থাপন করা :not(.printable)এটি এবং এর সমস্ত বংশধরদের প্রদর্শন করা থেকে বিরত রাখবে, কারণ এটি উপাদান এবং এর সাবট্রিকে পুরোপুরি বিন্যাস থেকে সরিয়ে দেয়। এর পরিবর্তে আপনি প্রায়শই ব্যবহার visibility: hiddenকরে এটি দেখতে পাবেন যা দৃশ্যমান বংশধরদের দেখানোর অনুমতি দেবে, তবে লুকানো উপাদানগুলি এখনও লেআউটটিকে যেমন প্রভাবিত করবে তেমনভাবে করবে। সংক্ষেপে, ঠিক সাবধান।

— বোল্টক্লক
সূত্র

4

তথ্যের সামান্য নাগেট হিসাবে, সিএসএসের মিডিয়া-অজ্ঞেয়গত দিকগুলির জন্য ব্রাউজার সমর্থন প্রায়শই মিডিয়া ধরণের ক্ষেত্রে একই হয় - যদি কোনও ব্রাউজার :not()স্ক্রিনে সমর্থন না করে তবে এটি মুদ্রণে সমর্থন করবে না।

— বোল্টক্লক

19

নোট করুন যে :not()কেবলমাত্র একটি সাধারণ নির্বাচক নেয় যার অর্থ এটি নেস্টেড নির্বাচকদের মতো থাকতে পারে না:not(div .printable) - দেখুন ডাব্লু 3 সি সিলেক্টরের বাক্য গঠন

— স্টিভ আইনন

1

আমি এটি শুধুমাত্র .active a এর জন্য চেষ্টা করেছি: (.active a) আমার পক্ষে কাজ করে না। তবে, এ: না (.এ্যাকটিভ) করেছে!

— ব্যবহারকারী 2367418

যখন আপনি বলবেন এটা আপনার জন্য কাজ না করে, আপনি সম্ভবত মানে এটা কাজ করে নি তোমার জন্য , ডান? এর অর্থ এটি নয় যে এটি কাজ করে না, এটি সম্ভবত স্বতন্ত্রতার ক্ষেত্রে - আপনার :not(.active)নিয়মে থাকা বৈশিষ্ট্যগুলি নিয়ম (গুলি) -এর বৈশিষ্ট্যগুলির দ্বারা উচ্চতর অগ্রাধিকার সহকারে সহজেই ছাড়িয়ে যেতে পারে।

— amn

1

@ কিলভস: আপনি কি সে সম্পর্কে নিশ্চিত? নির্দিষ্টতা :not()তার যুক্তি, যা উপায়ে যে :not(div)সমানভাবে নির্দিষ্ট div, :not(.cls)করতে .clsএবং :not(#id)করতে #id।

— বোল্টক্লক

179

:not([class])

প্রকৃতপক্ষে, এটি এমন কোনও কিছু নির্বাচন করবে class="css-selector"যাতে এটিতে কোনও CSS শ্রেণি প্রয়োগ করা হয়নি ( )।

আমি একটি জিসফিল ডেমো তৈরি করেছি

    h2 {color:#fff}
    :not([class]) {color:red;background-color:blue}
    .fake-class {color:green}

    <h2 class="fake-class">fake-class will be green</h2>
    <h2 class="">empty class SHOULD be white</h2>
    <h2>no class should be red</h2>
    <h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
    <h2 class="">empty class2 SHOULD be white</h2>
    <h2>no class2 SHOULD be red</h2>

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

এটি কি সমর্থিত? হ্যাঁ: ক্যানিউজ ডটকম (২0 জানুয়ারী 2020 অ্যাক্সেস করা হয়েছে) :

সমর্থন: 98.74%
আংশিক সমর্থন: 0.1%
মোট: 98,84%

মজার সম্পাদনা, আমি এর বিপরীতে গুগলিং করছিলাম: না। সিএসএস অবহেলা?

selector[class]  /* the oposite of :not[]*/

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

109

`:not`অস্বীকৃতি ছদ্ম বর্গ

অবহেলা সিএসএস সিউডো-ক্লাস, :not(X)একটি কার্যকরী স্বরলিপি যা একটি সাধারণ নির্বাচক এক্সকে যুক্তি হিসাবে গ্রহণ করে। এটি এমন একটি উপাদানের সাথে মেলে যা যুক্তি দ্বারা উপস্থাপিত হয় না। এক্সে অবশ্যই অন্য একটি প্রত্যাখ্যানকারী নির্বাচক থাকা উচিত।

আপনি :notসিএসএস সিলেক্টরদের মতোই অর্ডার করা ম্যাচের উপাদানগুলির কোনও উপসেট বাদ দিতে ব্যবহার করতে পারেন ।

সাধারণ উদাহরণ: শ্রেণি দ্বারা বাদে

div:not(.class)

divশ্রেণি ছাড়াই সমস্ত উপাদান নির্বাচন করবে.class

div:not(.class) {
  color: red;
}

<div>Make me red!</div>
<div class="class">...but not me...</div>

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

জটিল উদাহরণ: টাইপ / শ্রেণিবিন্যাস বাদে

:not(div) > div

divঅন্য যেসব শিশুরা সন্তুষ্ট নয় এমন সমস্ত উপাদান নির্বাচন করবেdiv

div {
  color: black
}
:not(div) > div {
  color: red;
}

<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>

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

জটিল উদাহরণ: ছদ্ম সিডোর নির্বাচকদের শৃঙ্খলাবদ্ধ করা

চেইন / নেস্ট :notসিলেক্টর এবং সিউডো উপাদানগুলিতে সক্ষম না হওয়ার উল্লেখযোগ্য ব্যতিক্রম সহ , আপনি অন্য সিউডো নির্বাচকদের সাথে একযোগে ব্যবহার করতে পারেন।

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}

<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>

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

ব্রাউজার সমর্থন , ইত্যাদি

:notএকটি হল সিএসএস 3 স্তর নির্বাচক , সমর্থন পরিপ্রেক্ষিতে প্রধান ব্যতিক্রম হল এটা হয় IE9 + +

অনুমানটি একটি আকর্ষণীয় বিষয়ও তোলে:

:not()ছদ্ম বেহুদা নির্বাচকরা লেখা যেতে করতে পারবেন। উদাহরণস্বরূপ :not(*|*), যা foo:not(bar)মোটেও কোনও উপাদানকে উপস্থাপন করে না বা যা fooউচ্চতর নির্দিষ্টতার সাথে সমান ।

— SW4
সূত্র

3

এটি একটি নৈশভোজ ছিল ভাল-নথিভুক্ত এবং ভাল-উত্তর দেওয়া উত্তর! #thumbsup

— জোনাথন Bredo Christensen

ঠিক আছে, আপনার উদাহরণটি :not(div) > divকেবল প্রত্যক্ষ পিতামাতার সাথে কাজ করবে। অন্যান্য দাদাদের কি হবে?

— ফাইন্ডআউট_কিউরান

দুর্দান্ত তথ্য! ঠিক যেটা আমার দরকার ছিল! ধন্যবাদ!

— জেমি

22

আমি এই কাজ করা উচিত:

:not(.printable)

থেকে "নেগেটিভ CSS নির্বাচনকারী" উত্তর ।

— Eregrith
সূত্র

9

ঠিক তেমন অবদান রাখতে চাই যে: উপরের উত্তরগুলি কৌণিক আকারে খুব কার্যকর হতে পারে, প্রভাব তৈরি বা ভিউ / ডিওএম সামঞ্জস্য করার চেয়ে,

input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}

নিশ্চিত করে যে আপনার পৃষ্ঠাটি লোড করার সময়, ইনপুট ক্ষেত্রগুলি কেবলমাত্র অবৈধ (লাল সীমানা বা ব্যাকগ্রাউন্ডস, ইত্যাদি) দেখায় যদি তাদের সাথে ডেটা যুক্ত থাকে (অর্থাত্ আর প্রাচীন নয়) তবে অবৈধ।

— BaneStar007
সূত্র

7

উদাহরণ

  [class*='section-']:not(.section-name) {
    @include opacity(0.6);
    // Write your css code here
  }

// অস্বচ্ছতা 0.6 সমস্ত "বিভাগ-" তবে "বিভাগের নাম" নয়

— Hakan
সূত্র

2

আপনি :not(.class)পূর্বে উল্লিখিত হিসাবে নির্বাচক ব্যবহার করতে পারেন ।

আপনি যদি ইন্টারনেট এক্সপ্লোরার সামঞ্জস্যতা সম্পর্কে যত্নশীল হন তবে আমি আপনাকে http://selectivizr.com/ ব্যবহার করার পরামর্শ দিই ।

তবে মনে রাখবেন এপাচে এটি চালানো অন্যথায় আপনি এর প্রভাবটি দেখতে পাবেন না।

— MelkorNemesis
সূত্র

3

এপাচের আওতায় চালানো মানে কী? Selectivizr একটি সামনের শেষ lib, এটি সার্ভার সফ্টওয়্যার সাথে কিছুই করার নেই

— Kloar

এটি আজাক্স অনুরোধ সম্পাদন করে - এটি কোনও কোনও সার্ভার ব্যতীত কাজ করে না।

— মেলকোরনেমেসিস

2

`:not()`সিউডো ক্লাস ব্যবহার করা :

একটি নির্দিষ্ট উপাদান (বা উপাদান) ব্যতীত সমস্ত কিছু নির্বাচনের জন্য। আমরা :not() সিএসএস সিউডো ক্লাস ব্যবহার করতে পারি । :not()ছদ্ম বর্গ একটি প্রয়োজন CSSতার আর্গুমেন্ট হিসাবে নির্বাচক। যুক্তি হিসাবে নির্দিষ্ট করা উপাদানগুলি বাদে নির্বাচক সমস্ত উপাদানগুলিতে শৈলী প্রয়োগ করবে।

উদাহরণ:

/* This query selects All div elements except for   */
div:not(.foo) {
  background-color: red;
}


/* Selects all hovered nav elements inside section element except
   for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
  background-color: red;
}


/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) { 
  color: red;
}

<div>test</div>
<div class="foo">test</div>

<br>

<section>
  <nav id="foo">test</nav>
  <nav>Hover me!!!</nav>
</section>
<nav></nav>

<br>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

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

আমরা ইতিমধ্যে এই ছদ্ম শ্রেণীর শক্তি দেখতে পাচ্ছি, এটি আমাদের কিছু নির্বাচককে বাদ দিয়ে আমাদের নির্বাচকদের সুবিধামত সুর করার সুযোগ দেয়। তদুপরি, এই সিউডো ক্লাসটি নির্বাচকের সুনির্দিষ্টতা বৃদ্ধি করে । উদাহরণ স্বরূপ:

/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
  color: red;
}

/* This selector is lower in the cascade but is overruled by the style above */
#foo {
  color: green;
}

<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

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

— উইলেম ভ্যান ডার ভীন
সূত্র

0

ক্লাস লগ-ইন না থাকলে আপনি যদি একটি নির্দিষ্ট শ্রেণি মেনুতে একটি নির্দিষ্ট সিএসএস রাখতে চান :

body:not(.logged-in) .menu  {
    display: none
}

— mihai
সূত্র

-1

অন্যরা যেমন বলেছে, আপনি সহজভাবে লিখেছেন: (ক্লাস) নয়। সিএসএস নির্বাচকদের জন্য, আমি এই লিঙ্কটি দেখার পরামর্শ দিচ্ছি, এটি আমার পুরো যাত্রা জুড়ে খুব সহায়ক হয়েছে: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

div:not(.success) {
  color: red;
}

নেগ্রেশন সিউডো ক্লাসটি বিশেষভাবে সহায়ক। ধরা যাক আমি ধারকগুলির একটি আইডি থাকা ব্যতীত সমস্ত ডিভগুলি নির্বাচন করতে চাই। উপরের স্নিপেট সেই কাজটি পুরোপুরি পরিচালনা করবে।

বা, যদি আমি অনুচ্ছেদের ট্যাগগুলি বাদে প্রতিটি একক উপাদান (পরামর্শ দেওয়া হয়নি) নির্বাচন করতে চাই, তবে আমরা এটি করতে পারি:

*:not(p) {
  color: green;
}

— HBhering
সূত্র

আমি কি কোনও সিএসএস নির্বাচককে নির্দিষ্ট শ্রেণি বা বৈশিষ্ট্য না থাকা উপাদান নির্বাচন করে লিখতে পারি?

:notঅস্বীকৃতি ছদ্ম বর্গ

সাধারণ উদাহরণ: শ্রেণি দ্বারা বাদে

জটিল উদাহরণ: টাইপ / শ্রেণিবিন্যাস বাদে

জটিল উদাহরণ: ছদ্ম সিডোর নির্বাচকদের শৃঙ্খলাবদ্ধ করা

ব্রাউজার সমর্থন , ইত্যাদি

:not()সিউডো ক্লাস ব্যবহার করা :

উদাহরণ:

`:not`অস্বীকৃতি ছদ্ম বর্গ

`:not()`সিউডো ক্লাস ব্যবহার করা :