tag - কিভাবে html তৈরি করা যায়




আমি একটি নির্দিষ্ট ক্লাস না উপাদান নির্বাচন করে একটি সিএসএস নির্বাচক লিখতে পারেন? (6)

ব্যবহার করে :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>

আমি একটি 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>

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

এটা কি সম্ভব?

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


:not ছদ্মবেশ ক্লাস না

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

আপনি ব্যবহার করতে পারেন :not মিলযুক্ত উপাদানগুলির কোন উপসাগরকে বাদ দিতে :not , আপনি স্বাভাবিক সিএসএস নির্বাচক হিসাবে আদেশ করেছেন।

সহজ উদাহরণ: বর্গ দ্বারা বাদ

div:not(.class)

ক্লাস ছাড়া সব .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 একটি CSS3 লেভেল সিলেক্টর নয় , সমর্থনের ক্ষেত্রে প্রধান ব্যতিক্রম হল এটি IE9 +

স্পেক এছাড়াও একটি আকর্ষণীয় পয়েন্ট করে তোলে:

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


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

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

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



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

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

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

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


উদাহরণ

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

// অস্পষ্টতা 0.6 সব "অধ্যায়-" কিন্তু না "বিভাগের নাম"







css-selectors