O que é esse seletor de CSS? [classe * = "extensão"]

190

Eu vi esse seletor no Twitter Bootstrap:

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

Alguém sabe como essa técnica é chamada e o que faz?

css css-selectors Jon
fonte
1
api.jquery.com/attribute-contains-selector
biziclop
1
Muitos seletores de CSS disponíveis: w3.org/TR/selectors/#selectors
Tim Medora
jsbin.com/otizoz/edit#javascript,html,live
Roko C. Buljan
Semelhantes, mas não uma duplicata completa, stackoverflow.com/questions/7366323/... (que liga de volta aqui)
BoltClock

Respostas:

332

É um seletor de curinga de atributo. No exemplo que você deu, ele procura por qualquer elemento filho .show-gridque tenha uma classe que CONTAINS span.

Então, selecionaria o <strong>elemento neste exemplo:

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

Você também pode pesquisar "começa com ..."

div[class^="something"] { }

que funcionaria em algo como isto: -

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

e 'termina com ...'

div[class$="something"] { }

o que funcionaria

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

Boas referências

isNaN1247
fonte
1
Eu sei que esta é a resposta de idade, mas eu gostaria de acrescentar esta referência à lista de referência: w3.org/TR/css3-selectors
Dread Boy
2
Gostaria de adicionar outra referência para o caso de as pessoas acharem isso útil: AllCssSelectors.com
user3339411
6
O div[class^="something"] { }seletor "começa com" funciona apenas se o elemento contiver uma única classe, ou se várias, quando essa classe for a primeira à esquerda.
Nahn 8/01/16
2
Eu acrescentaria div[class~="something"]para encontrar correspondências em listas separadas por espaço (por exemplo, classes) e div[class|="something"para corresponder em uma lista separada por hífen, por exemplo, corresponder a algo no nome da classe você é algo acima
Ruskin
31 
.show-grid [class*="span"]

É um seletor de CSS que seleciona todos os elementos com a classe show-grid , que possui um elemento filho cuja classe contém cuja o intervalo de nome .

Spikeh
fonte
15
na verdade, ele seleciona o "elemento filho que está classe contém a extensão de nome" e não "todos os elementos com a classe show-grid"
Utopik
3

Os seguintes:

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

significa que todos os elementos filhos de '.show-grid' com uma classe que contenha a palavra 'span' nela adquirirão essas propriedades 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>

Todos os elementos são atingidos, exceto o <span>próprio.


Em relação ao Bootstrap:

  • span6 : essa foi a técnica do andaime do Bootstrap 2 que dividiu uma seção em uma grade horizontal, com base em partes de 12. Assim, span6 , teria uma largura de 50%.
  • Na implementação atual do Bootstrap (v.3 e v.4), agora você usa as .col-*classes (por exemplo col-sm-6), que também especificam um ponto de interrupção de mídia para lidar com a capacidade de resposta quando a janela diminui abaixo de um determinado tamanho. Verifique o Bootstrap 4.1 e o Bootstrap 3.3.7 para obter mais documentação. Eu recomendaria ir com um Bootstrap mais tarde hoje em dia
Tyler
fonte
2

Ele seleciona todos os elementos em que o nome da classe contém a string em "span"algum lugar. Também existe ^=para o início de uma string e $=para o final de uma string. Aqui está uma boa referência para alguns seletores de CSS: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Eu estou familiarizado apenas com as classes de inicialização em spanXque X é um número inteiro, mas se houvesse outros seletores que terminassem emspan , ele também se enquadraria nessas regras.

Apenas ajuda a aplicar regras gerais de CSS.

Kevin Li
fonte