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

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