Apa pemilih CSS ini? [kelas * = "rentang"]

190

Saya melihat pemilih ini di Twitter Bootstrap:

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

Adakah yang tahu teknik ini disebut dan apa fungsinya?

css css-selectors

— jon
sumber

1

api.jquery.com/attribute-contains-selector

— biziclop

1

Banyak penyeleksi CSS keren tersedia: w3.org/TR/selectors/#selectors

— Tim Medora

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

— Roko C. Buljan

Serupa tetapi bukan duplikat lengkap, stackoverflow.com/questions/7366323/… (yang menghubungkan kembali ke sini)

— BoltClock

332

Itu adalah atribut wildcard selector. Dalam sampel yang Anda berikan, ia mencari elemen anak di bawah .show-gridyang memiliki kelas yang mengandung span.

Jadi akan memilih <strong>elemen dalam contoh ini:

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

Anda juga dapat melakukan pencarian untuk 'diawali dengan ...'

div[class^="something"] { }

yang akan bekerja pada sesuatu seperti ini: -

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

dan 'diakhiri dengan ...'

div[class$="something"] { }

yang akan berhasil

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

Referensi yang bagus

— isNaN1247
sumber

1

Saya tahu ini adalah jawaban lama tetapi saya akan menambahkan referensi ini ke daftar referensi: w3.org/TR/css3-selectors

— Dread Boy

2

Ingin menambahkan referensi lain untuk berjaga-jaga kalau-kalau orang menemukan ini berguna: AllCssSelectors.com

— user3339411

6

The div[class^="something"] { }"dimulai dengan" pemilih hanya bekerja jika elemen berisi satu kelas tunggal, atau jika beberapa, ketika kelas yang adalah yang pertama di sebelah kiri.

— Nahn

2

Saya akan menambahkan div[class~="something"]untuk menemukan kecocokan dalam daftar yang dipisahkan oleh ruang (misalnya kelas) dan div[class|="something"untuk mencocokkan pada daftar yang dipisahkan dengan tanda hubung misalnya mencocokkan sesuatu di nama-Anda-sesuatu-kelas di atas

— Ruskin

31

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

Ini adalah pemilih CSS yang memilih semua elemen dengan show-grid kelas , yang memiliki elemen turunan yang kelasnya berisi rentang nama .

— Spikeh
sumber

15

sebenarnya, ia memilih "elemen anak yang kelasnya berisi rentang nama" dan bukan "semua elemen dengan kelas show-grid"

— Utopik

3

Pengikut:

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

berarti bahwa semua elemen turunan dari '.show-grid' dengan kelas yang mengandung kata 'span' di dalamnya akan memperoleh properti CSS tersebut.

<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>

Semua elemen terkena kecuali untuk <span>dengan sendirinya.

Salam untuk Bootstrap:

span6: ini adalah teknik perancah Bootstrap 2 yang membagi bagian menjadi kisi horizontal, berdasarkan pada bagian 12. Dengan demikian span6akan memiliki lebar 50%.
Dalam implementasi Bootstrap (v.3 dan v.4) hari ini, Anda sekarang menggunakan .col-*kelas (mis. col-sm-6), Yang juga menentukan breakpoint media untuk menangani responsif ketika jendela menyusut di bawah ukuran tertentu. Periksa Bootstrap 4.1 dan Bootstrap 3.3.7 untuk dokumentasi lebih lanjut. Saya akan merekomendasikan pergi dengan Bootstrap nanti

— Tyler
sumber

2

Itu memilih semua elemen di mana nama kelas berisi string di "span"suatu tempat. Ada juga ^=untuk awal string, dan $=untuk akhir string. Berikut ini adalah referensi yang bagus untuk beberapa penyeleksi CSS: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Aku hanya akrab dengan kelas bootstrap spanXmana X adalah bilangan bulat, tetapi jika ada pemilih lain yang berakhir di span, juga akan jatuh di bawah aturan-aturan ini.

Ini hanya membantu untuk menerapkan aturan CSS selimut.

— Kevin Li
sumber