web-dev-qa-db-fra.com

Quel est ce sélecteur CSS? [class * = "span"]

J'ai vu ce sélecteur sur Twitter Bootstrap:

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

Est-ce que quelqu'un sait comment cette technique s'appelle et ce qu'elle fait?

csscss3css-selectors
179
jon

C'est un sélecteur générique d'attribut. Dans l'exemple que vous avez donné, il recherche n'importe quel élément enfant sous .show-grid qui a une classe qui CONTIENT _ span.

Donc, sélectionnez l'élément <strong> dans cet exemple:

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

Vous pouvez également faire des recherches pour 'commence par ...'

div[class^="something"] { }

qui fonctionnerait sur quelque chose comme ceci: -

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

et 'se termine par ...'

div[class$="something"] { }

qui travaillerait sur

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

Bonnes références

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

C'est un sélecteur CSS qui sélectionne tous les éléments de la classe show-grid, qui a un élément enfant dont la classe contient le nom span.

30
Spikeh

Il sélectionne tous les éléments dont le nom de classe contient la chaîne "span" quelque part. Il y a aussi ^= pour le début d'une chaîne et $= pour la fin d'une chaîne. Voici une bonne référence pour certains sélecteurs CSS: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Je ne connais que les bootstrap _ classes spanX où X est un entier, mais s'il y avait d'autres sélecteurs que se terminait dans span, il serait également soumis à ces règles.

Il est simplement utile d’appliquer des règles CSS générales.

2
Kevin Li

Ce qui suit: 

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

signifie que tous les éléments enfants de '.show-grid' avec une classe qui CONTIENT le mot 'span' qu'il contient acquerront ces propriétés 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>

Tous les éléments sont touchés, à l'exception du <span> par lui-même.


En ce qui concerne Bootstrap:

  • span6: il s'agissait de la technique d'échafaudage de Bootstrap 2 qui divisait une section en une grille horizontale, sur la base de parties de 12. Ainsi span6 aurait une largeur de 50%.
  • Dans l’implémentation journalière de Bootstrap (v.3 et v.4), vous utilisez maintenant les classes .col-* (par exemple, col-sm-6), qui spécifie également un point d'arrêt de média à gérer. réactivité lorsque la fenêtre est réduite en dessous d'une certaine taille. Consultez Bootstrap 4.1 et Bootstrap 3.3.7 pour plus de documentation. Je recommanderais d'aller avec un plus tard Bootstrap de nos jours
1
Tyler