Cos'è questo selettore CSS? [Class = * “span”]

190

Ho visto questo selettore in Twitter Bootstrap:

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

Qualcuno sa come si chiama questa tecnica e come funziona?

css css-selectors

— jon
fonte

1

api.jquery.com/attribute-contains-selector

— biziclop

1

Molti fantastici selettori CSS disponibili: w3.org/TR/selectors/#selectors

— Tim Medora

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

— Roko C. Buljan

Simile ma non un duplicato completo, stackoverflow.com/questions/7366323/… (che collega qui)

— BoltClock

332

È un selettore di caratteri jolly di attributo. Nell'esempio che hai fornito, cerca tutti gli elementi figlio .show-gridche hanno una classe CONTAINS span.

Quindi selezionare l' <strong>elemento in questo esempio:

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

Puoi anche effettuare ricerche per "inizia con ..."

div[class^="something"] { }

che funzionerebbe su qualcosa del genere: -

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

e "termina con ..."

div[class$="something"] { }

su cui avrebbe funzionato

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

Buone referenze

— isNaN1247
fonte

1

So che questa è una vecchia risposta, ma aggiungerei questo riferimento all'elenco di riferimento: w3.org/TR/css3-selectors

— Dread Boy

2

Vorrei aggiungere un altro riferimento nel caso in cui le persone lo trovino utile: AllCssSelectors.com

— user3339411

6

Il div[class^="something"] { }selettore "inizia con" funziona solo se l'elemento contiene una singola classe, o se multiplo, quando quella classe è la prima a sinistra.

— Nahn,

2

Vorrei aggiungere div[class~="something"]per trovare corrispondenze in elenchi separati da spazio (ad es. Classi) e div[class|="something"per abbinamenti in un elenco separato da trattini, ad es. Per abbinare qualcosa in te-sei-qualcosa di cui sopra

— Ruskin

31

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

È un selettore CSS che seleziona tutti gli elementi con la classe show-grid , che ha un elemento figlio la cui classe contiene l' intervallo di nomi .

— Spikeh
fonte

15

in realtà, seleziona "l'elemento figlio la cui classe contiene il nome span" e non "tutti gli elementi con la classe show-grid"

— Utopik

3

Il seguente:

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

significa che tutti gli elementi figlio di ".show-grid" con una classe che CONTIENE la parola "span" in essa acquisiranno quelle proprietà 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>

Tutti gli elementi vengono colpiti tranne che <span>da solo.

Per quanto riguarda il Bootstrap:

span6: questa era la tecnica del ponteggio di Bootstrap 2 che divideva una sezione in una griglia orizzontale, basata su parti di 12. Quindi span6avrebbe una larghezza del 50%.
Nell'attuale implementazione di Bootstrap (v.3 e v.4), ora si utilizzano le .col-*classi (ad es. col-sm-6), Che specifica anche un punto di interruzione multimediale per gestire la reattività quando la finestra si restringe al di sotto di una determinata dimensione. Controllare Bootstrap 4.1 e Bootstrap 3.3.7 per ulteriore documentazione. Al giorno d'oggi consiglierei di utilizzare un Bootstrap successivo

— Tyler
fonte

2

Seleziona tutti gli elementi in cui il nome della classe contiene la stringa "span"da qualche parte. C'è anche ^=per l'inizio di una stringa e $=per la fine di una stringa. Ecco un buon riferimento per alcuni selettori CSS: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Sono solo familiarità con le classi bootstrap spanXdove X è un numero intero, ma se ci fossero altri selettori che si è conclusa in span, sarebbe anche cadere in queste regole.

Aiuta solo ad applicare le regole CSS coperte.

— Kevin Li
fonte