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

190

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?

css css-selectors

— Jon
source

1

api.jquery.com/attribute-contains-selector

— biziclop

1

Beaucoup de sélecteurs CSS sympas disponibles: w3.org/TR/selectors/#selectors

— Tim Medora

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

— Roko C. Buljan

Similaire mais pas un doublon complet, stackoverflow.com/questions/7366323/… (qui renvoie ici)

— BoltClock

332

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

— isNaN1247
source

1

Je sais que c'est une vieille réponse mais j'ajouterais cette référence à la liste de référence: w3.org/TR/css3-selectors

— Dread Boy

2

Je souhaite ajouter une autre référence au cas où les gens trouveraient cela utile: AllCssSelectors.com

— user3339411

6

Le div[class^="something"] { }sélecteur "commence par" ne fonctionne que si l'élément contient une seule classe, ou s'il est multiple, lorsque cette classe est la première à gauche.

— Nahn

2

J'ajouterais div[class~="something"]pour trouver des correspondances dans des listes séparées par des espaces (par exemple, des classes) et div[class|="something"pour une correspondance sur une liste séparée par des tirets, par exemple, correspondant à quelque chose dans le nom de classe vous-êtes-quelque chose ci

— Ruskin

31

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

— Spikeh
source

15

en fait, il sélectionne "l'élément enfant dont la classe contient le nom span" et non "tous les éléments avec la classe show-grid"

— Utopik

3

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

— Tyler
source

2

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.

— Kevin Li
source