Co to jest selektor CSS? [class * = „span”]

190

Ten selektor widziałem na Twitterze Bootstrap:

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

Czy ktoś wie, jak nazywa się ta technika i co ona robi?

css css-selectors jon
źródło
1
api.jquery.com/attribute-contains-selector
biziclop
1
Dostępnych jest wiele fajnych selektorów CSS: w3.org/TR/selectors/#selectors
Tim Medora
jsbin.com/otizoz/edit#javascript,html,live
Roko C. Buljan
Podobny, ale nie kompletny duplikat, stackoverflow.com/questions/7366323/… (który prowadzi tutaj z powrotem)
BoltClock

Odpowiedzi:

332

Jest to selektor symboli zastępczych atrybutów. W podanej przez ciebie próbce szuka elementu potomnego, .show-gridktóry ma klasę ZAWIERAJĄCĄ span.

Więc wybrałbym <strong>element w tym przykładzie:

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

Możesz także wyszukiwać hasła „zaczyna się od…”

div[class^="something"] { }

który działałby na czymś takim: -

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

i „kończy się na ...”

div[class$="something"] { }

które by działały

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

Dobre referencje

isNaN1247
źródło
1
Wiem, że to stara odpowiedź, ale chciałbym dodać to odniesienie do listy referencji: w3.org/TR/css3-selectors
Dread Boy
2
Chciałbym dodać kolejne odniesienie na wypadek, gdyby ludzie uznali to za przydatne: AllCssSelectors.com
user3339411
6
W div[class^="something"] { }„zaczyna się od” selektor działa tylko wtedy, gdy element zawiera pojedynczą klasę, czy wiele, że gdy klasa jest pierwsza po lewej stronie.
Nahn
2
Dodałbym div[class~="something"]do wyszukiwania dopasowań na listach oddzielonych spacjami (np. Klas) i div[class|="something"do dopasowywania na liście rozdzielanych łącznikami, np. Dopasowywania czegoś w powyższej nazwie klasy you-are-something
Ruskin
31 
.show-grid [class*="span"]

Jest to selektor CSS, który wybiera wszystkie elementy z klasą show-siatki , która ma element podrzędny, kto jest klasa zawiera nazwę rozpiętości .

Spikeh
źródło
15
w rzeczywistości wybiera „element potomny, którego klasa zawiera zakres nazw”, a nie „wszystkie elementy z klasą show-grid”
Utopik
3

Następujące:

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

oznacza, że ​​wszystkie elementy potomne „.show-grid” z klasą, która ZAWIERA w nim słowo „span”, uzyskają te właściwości 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>

Wszystkie elementy zostają trafione, z wyjątkiem <span>samego.


W odniesieniu do Bootstrap:

  • span6: to była technika rusztowania Bootstrap 2, która podzieliła sekcję na poziomą siatkę, opartą na częściach 12. W span6ten sposób miałaby szerokość 50%.
  • W bieżącej implementacji Bootstrap (wer. 3 i wer. 4) używasz teraz .col-*klas (np. col-sm-6), Które określają także punkt przerwania mediów do obsługi czasu reakcji, gdy okno skurczy się poniżej określonego rozmiaru. Aby uzyskać więcej dokumentacji, sprawdź Bootstrap 4.1 i Bootstrap 3.3.7 . W dzisiejszych czasach zalecałbym późniejszy start
Tyler
źródło
2

Wybiera wszystkie elementy, w których "span"gdzieś nazwa klasy zawiera ciąg znaków . Jest też ^=początek łańcucha i $=koniec łańcucha. Oto dobre odniesienie do niektórych selektorów CSS: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Znam tylko z klasami bootstrap spanX, gdzie X jest liczbą całkowitą, ale jeśli nie było innych selektorów, które zakończyły się span, to również są objęte tymi przepisami.

Pomaga po prostu zastosować ogólne reguły CSS.

Kevin Li
źródło