এই সিএসএস নির্বাচনকারী কী? [বর্গ * = "বিঘত"]

Question

আমি এই নির্বাচকটিকে টুইটার বুটস্ট্র্যাপে দেখেছি:

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}

কেউ কি জানেন যে এই কৌশলটি কী বলা হয় এবং এটি কী করে?

Comments

api.jquery.com/attribute-contains-selector

— 23:43

অনেক দুর্দান্ত সিএসএস নির্বাচক উপলব্ধ: w3.org/TR/selectors/# নির্বাচনকারী

— টিম মেডোরা

jsbin.com/otizoz/edit#javascript, html,live

— রোকো সি

একই কিন্তু সম্পূর্ণ সদৃশ, stackoverflow.com/questions/7366323/... (যা এখানে ফিরে সংযোগগুলি)

— BoltClock

Answer 1

এটি একটি অ্যাট্রিবিউট ওয়াইল্ডকার্ড নির্বাচনকারী। আপনি যে নমুনা দিয়েছেন তাতে এটি কোনও শিশু উপাদানের সন্ধান করে যার অধীনে .show-gridএকটি শ্রেণি রয়েছে span।

সুতরাং <strong>এই উদাহরণে উপাদান নির্বাচন করবে :

<div class="show-grid">
    <strong class="span6">Blah blah</strong>
</div>

আপনি 'দিয়ে শুরু হয় ...' এর জন্য অনুসন্ধানও করতে পারেন

div[class^="something"] { }

যা এই জাতীয় কিছুতে কাজ করবে: -

<div class="something-else-class"></div>

এবং 'এর সাথে শেষ হয় ...'

div[class$="something"] { }

যা কাজ করবে

<div class="you-are-something"></div>

ভাল রেফারেন্স

• সিএসএস 3 অ্যাট্রিবিউট সিলেক্টর: সাবস্ট্রিং ম্যাচিং
• 30 টি সিএসএস নির্বাচক আপনাকে অবশ্যই মুখস্থ করতে হবে
• ডাব্লু 3 সি সিএসএস 3 নির্বাচক

Comments

আমি জানি এটি পুরানো উত্তর তবে আমি রেফারেন্স তালিকার এই রেফারেন্সটি যুক্ত করব: w3.org/TR/css3-setectors

— ড্রেড বয়

লোকেরা কেবল এই দরকারীটি

— user3339411

div[class^="something"] { }নির্বাচক "দিয়ে শুরু" শুধুমাত্র কাজ করে উপাদান একটি একক বর্গ রয়েছে, বা একাধিক হলে, যখন যে ক্লাসে বাম প্রথম এক।

— নাহ্ন

আমি div[class~="something"]স্থান বিচ্ছিন্ন তালিকায় ম্যাচগুলি সন্ধানের জন্য যুক্ত করব (উদাহরণস্বরূপ ক্লাস) এবং div[class|="something"হাইফেন পৃথক তালিকার সাথে মিলের জন্য উদাহরণস্বরূপ আপনি-কিছু-কিছু বর্গের নামের সাথে কিছু মিলিয়ে যাবেন

— রুসকিন

Answer 2

.show-grid [class*="span"]

এটি একটি সিএসএস নির্বাচক যা ক্লাস শো-গ্রিডের সাথে সমস্ত উপাদান নির্বাচন করে , এতে একটি শিশু উপাদান রয়েছে যার ক্লাসে নাম স্প্যান থাকে ।

Comments

প্রকৃতপক্ষে, এটি "শিশু উপাদান যা শ্রেণীর নাম স্প্যান ধারণ করে" এবং "ক্লাস শো-গ্রিডের সমস্ত উপাদান নয় " নির্বাচন করে

— ইউটোপিক

Answer 3

পরবর্তী:

.show-grid [class*="span"] {

এর অর্থ হল যে 'শ্যাড-গ্রিড' এর সমস্ত শিশু উপাদান যে শ্রেণীর সাথে এতে 'স্প্যান' শব্দটি অন্তর্ভুক্ত করে সেগুলি সেই CSS বৈশিষ্ট্য অর্জন করবে।

<div class="show-grid">
  <div class="span">.span</div>
  <div class="span6">span6</div>
  <div class="attention-span">attention</div>
  <div class="spanish">spanish</div>
  <div class="mariospan">mariospan</div>
  <div class="espanol">espanol</div>

  <div>
    <div class="span">.span</div>
  </div>

  <p class="span">span</p>
  <span class="span">I do GET HIT</span>

  <span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>

<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>

উপাদানগুলি সমস্ত <span>নিজেই ব্যতীত হিট হয়।

বুটস্ট্র্যাপ সম্পর্কিত:

• span6: এটি ছিল বুটস্ট্র্যাপ 2 এর মজাদার কৌশল যা 12 এর অংশগুলির উপর ভিত্তি করে একটি বিভাগকে একটি অনুভূমিক গ্রিডে বিভক্ত করেছিল। সুতরাং এর span6প্রস্থটি 50% হবে have
• বুটস্ট্র্যাপের বর্তমান দিনের প্রয়োগে (v.3 এবং v.4), আপনি এখন .col-*ক্লাসগুলি (উদাহরণস্বরূপ col-sm-6) ব্যবহার করেন , যা উইন্ডো নির্দিষ্ট আকারের নীচে সঙ্কুচিত হলে প্রতিক্রিয়াটি পরিচালনা করতে একটি মিডিয়া ব্রেকপয়েন্টও নির্দিষ্ট করে। আরও ডকুমেন্টেশনের জন্য বুটস্ট্র্যাপ 4.1 এবং বুটস্ট্র্যাপ 3.3.7 পরীক্ষা করুন । আমি আজকাল কোনও পরবর্তী বুটস্ট্র্যাপের সাথে যাওয়ার পরামর্শ দেব

Answer 4

এটি এমন সমস্ত উপাদান নির্বাচন করে যেখানে শ্রেণীর নামটিতে "span"কোথাও স্ট্রিং রয়েছে । এছাড়াও আছে ^=একটি স্ট্রিং শুরুতে জন্য, এবং $=একটি স্ট্রিং এর শেষে জন্য। কিছু সিএসএস নির্বাচকদের জন্য এখানে একটি ভাল রেফারেন্স রয়েছে: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

আমি কেবল বুটস্ট্র্যাপ ক্লাসের সাথেই পরিচিত spanXযেখানে এক্স একটি পূর্ণসংখ্যা হয় তবে অন্য নির্বাচকরা যদি এখানে শেষ হয় spanতবে এটিও এই নিয়মের আওতায় পড়ে।

এটি কেবল কম্বল সিএসএস বিধি প্রয়োগ করতে সহায়তা করে।