Qu'est-ce que ce sélecteur CSS? [class * = "span"]

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

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

Quelqu'un sait-il comment s'appelle cette technique et ce qu'elle fait?

C'est un sélecteur de caractères génériques d'attribut. Dans l'exemple que vous avez donné, il recherche tout élément enfant sous .show-gridqui a une classe qui CONTAINS span.

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

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

Vous pouvez également effectuer des recherches sur "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 fonctionnerait sur

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

Bonnes références

• Sélecteurs d'attributs CSS3: correspondance de sous-chaîne
• Les 30 sélecteurs CSS que vous devez mémoriser
• Sélecteurs CSS3 du W3C

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

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

Le suivant:

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

signifie que tous les éléments enfants de '.show-grid' avec une classe qui CONTIENT le mot 'span' à l'intérieur 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>seul.

En ce qui concerne Bootstrap:

• span6 : c'était la technique d'échafaudage de Bootstrap 2 qui divisait une section en une grille horizontale, basée sur des parties de 12. Ainsi span6 aurait une largeur de 50%.
• Dans l'implémentation actuelle de Bootstrap (v.3 et v.4), vous utilisez désormais les .col-*classes (par exemple col-sm-6), qui spécifient également un point d'arrêt du support pour gérer la réactivité lorsque la fenêtre se réduit 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 Bootstrap plus tard de nos jours

Il sélectionne tous les éléments dont le nom de classe contient la chaîne "span"quelque part. Il y en 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 classes bootstrap spanXoù X est un entier, mais s'il y avait d'autres sélecteurs qui se terminaient par span, ils tomberaient également sous ces règles.

Cela aide simplement à appliquer des règles CSS générales.