2

Pessoal alguém sabe me dizer qual é a diferença entre:

  • [ID=""] e #
  • [CLASS=""] e .

Qual diferença em que eles fazem, código ficar maior? Mais feio?

2 Respostas 2

3

Eles são parecidos. O [] é o seletor de atributos, e o CSS seleciona elementos que têm exatamente esse atributo.

Repara que quando usas o método [class="foo bar"] ele só vai funcionar em elementos que têm ambas as classes. Enquanto que div.foo atua em todas as divs que têm essa classe.

A técnica [] é util para outros atributos que não id ou class, pois esses têm seletores próprios e mais simples de usar ou combinar.

Exemplo:

div[class="um"] {
    background-color: #ccf;
}
div.um{
    border:2px solid red;
}
<div class="um">1</div>
<div class="dois">2</div>
<div class="um dois">1 2</div>

(jsFiddle: http://jsfiddle.net/1rcxfrxz/)

Quando usas div.um ele atua em dois elementos, quando usas div[class="um"] ele só atua em um elemento.

2
  • Nesse caso, ele pode usar o selector .foo.bar, que gera o mesmo efeito de [class="foo bar"]. 6/07/2015 às 12:43
  • 1
    @WallaceMaxters só uma nota .foo.bar não é a mesma coisa que [class="foo bar"], com = o valor que que ser exato da maneira que foi escrita, já com ., podem haver inúmeros espaços e variações de posição que ainda sim os elementos são encontrados.
    – Syzoth
    6/07/2015 às 18:23
2

# (Sustenido)

Já é um caractere para representação do ID do elemento por padrão no css.

[ID="MAIN"] (Seletor por Atributo)

Significa que você está utilizando um tipo de selector do CSS3, onde você pode "pegar" um elemento pelo atributo (Attribute Selector). Nesse caso, você está pegando pelo id (coisa que a sustenido # já faz)

A sugestão, nesse caso, é usar #, para manter o seu código padronizado :)

Expressões complexas para Capturas elementos por atributos

O Seletor de atributo é mais complexo do que isso. Ele pode pegar um elemento apenas se definimos a parte do nome de um atributo.

Exemplo

[class=^"box-"]{
 color:#f00;
}

<div class='box-1'></div>
<div class='box-2'></div>
<div class='box-3'></div>


[class*="test"] {
    background: #ffff00;
}

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .