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?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEles 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.
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.
.foo.bar
, que gera o mesmo efeito de [class="foo bar"].
.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.
6/07/2015 às 18:23
Já é um caractere para representação do ID do elemento por padrão no css.
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 :)
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>