Was ist dieser CSS-Selektor? [class * = "span"]

190

Ich habe diesen Selektor in Twitter Bootstrap gesehen:

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

Weiß jemand, wie diese Technik heißt und was sie tut?

css css-selectors

— jon
quelle

1

api.jquery.com/attribute-contains-selector

— biziclop

1

Viele coole CSS-Selektoren verfügbar: w3.org/TR/selectors/#selectors

— Tim Medora

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

— Roko C. Buljan

Ähnlich, aber kein vollständiges Duplikat, stackoverflow.com/questions/7366323/… (das hierher zurückführt)

— BoltClock

332

Es ist ein Attribut-Platzhalter. In dem von Ihnen angegebenen Beispiel wird nach .show-griduntergeordneten Elementen gesucht, die eine Klasse enthalten, die CONTAINS enthältspan .

Wählen Sie also das <strong>Element in diesem Beispiel aus:

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

Sie können auch nach "beginnt mit ..." suchen.

div[class^="something"] { }

was auf so etwas funktionieren würde: -

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

und 'endet mit ...'

div[class$="something"] { }

das würde funktionieren

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

Gute Referenzen

— isNaN1247
quelle

1

Ich weiß, dass dies eine alte Antwort ist, aber ich würde diesen Verweis zur Referenzliste hinzufügen: w3.org/TR/css3-selectors

— Dread Boy

2

Ich möchte eine weitere Referenz hinzufügen, nur für den Fall, dass die Leute dies nützlich finden: AllCssSelectors.com

— user3339411

6

Der div[class^="something"] { }Selektor "beginnt mit" funktioniert nur, wenn das Element eine einzelne Klasse enthält, oder wenn mehrere, wenn diese Klasse die erste auf der linken Seite ist.

— Nahn

2

Ich möchte hinzufügen , div[class~="something"]für die Spiele im Raum zu finden getrennte Listen (zB Klassen) und div[class|="something"für den Abgleich auf einen Bindestrich in der Liste zB passende etwas getrennt you-are-etwas classname oben

— Ruskin

31

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

Es ist ein CSS - Selektor, der alle Elemente mit der Klasse wählt Show-Raster , das ein untergeordnetes Element hat , die Klasse ist enthält den Namen Spanne .

— Spikeh
quelle

15

— Tatsächlich

3

Folgende:

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

bedeutet, dass alle untergeordneten Elemente von '.show-grid' mit einer Klasse, die das Wort 'span' enthält, diese CSS-Eigenschaften erhalten.

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

Alle Elemente außer dem werden getroffen <span> von selbst werden getroffen.

In Bezug auf Bootstrap:

span6 : Dies war die Gerüsttechnik von Bootstrap 2, bei der ein Abschnitt basierend auf Teilen von 12 in ein horizontales Gitter unterteilt wurde span6 hätte er eine Breite von 50%.
In der aktuellen Implementierung von Bootstrap (v.3 und v.4) verwenden Sie jetzt die .col-*Klassen (z. B. col-sm-6), die auch einen Medien-Haltepunkt angeben, um die Reaktionsfähigkeit zu handhaben, wenn das Fenster unter eine bestimmte Größe verkleinert wird. Weitere Dokumentation finden Sie in Bootstrap 4.1 und Bootstrap 3.3.7 . Ich würde heutzutage empfehlen, einen späteren Bootstrap zu verwenden

— Tyler
quelle

2

Es werden alle Elemente ausgewählt, bei denen der Klassenname "span"irgendwo die Zeichenfolge enthält . Es gibt auch ^=für den Anfang einer Zeichenfolge und $=für das Ende einer Zeichenfolge. Hier ist eine gute Referenz für einige CSS-Selektoren: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Ich bin nur vertraut mit den Bootstrap - Klassen , spanXwobei X eine ganze Zahl ist, aber wenn es andere Wähler waren , dass endete in span, wäre es auch unter diesen Regeln fallen.

Es ist nur hilfreich, pauschale CSS-Regeln anzuwenden.

— Kevin Li
quelle