Diferenças

[Rodrigo Resende 1]

Pessoal eu queria saber a diferença entre:

 

.nomediv{}

#nomediv{}

div#nomediv{}

 

Qual é a diferença. Quando usar cada uma?

Obrigado.

[Thiago Retondar 18]

.nomediv{} » O "." indica que é uma classe

#nomediv{} » O "#" indica uma ID

div#nomediv{} » O mesmo da anterior, com apenas o nome da div que acompanha o ID.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Eliseu M. 2]

.nomediv = class nomediv Exemplo:

<div class="nomediv">Content</div>

 

#nomediv = id nomediv Exemplo:

<div id="nomediv">Content</div>

 

div#nomediv = apenas div com id nomediv Exemplo:

Funciona:

<div id="nomediv">Content</div>

 

Não funciona:

<span id="nomediv">Content</span>

Ah, e pra estilizar um elemento dentro de uma classe ou id:

 

div#nomediv a {};

Ele vai formatar todos os links dentro das divs com id nomediv.

 

Sacou?? Muito simples, não?? Até mais!!

[Paulo de Tarso F. M. 24]

Só complementando, eu uso sempre assim:

div#nomediv

Isso facilita e muito quando você precisa analisar seu CSS, pois dessa forma, você bate o olho e já sabe que esta formatação é da div tal, e não tem que "descobrir" qual tag está recebendo esta id...

 

Mas obviamente que se você aplicar a id nomediv em outra tag a não ser uma <div>, não irá funcionar... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif Mas pergunto: por que cargas d'águas alguém iria querer utilizar exatamente um mesmo nome para um id já existente?

 

Bom, são apenas boas práticas, cada um tem seu jeito de trabalhar, lógico, eu só acho que a interpretação dos códigos fica muito mais legível assim...

 

Um exemplo, peguem esse trecho abaixo:

#Main {
	width:200px;
	height:50px;
}
#Main #Cnt {
	display:block;
	width:200px;
	height:50px;
}

Legal, bacana, mas confuso, não acham? :mellow: Compare com esse abaixo:

div#Main {
	width:200px;
	height:50px;
}
div#Main a#Cnt {
	display:block;
	width:200px;
	height:50px;
}

Não fica mais fácil de interpretar? Logicamente que nesse caso, se você não precisa de uma interação com JS no link dentro da div#Main, você nem precisa desse id #Cnt (de onde eu tirei Cnt? hehehe)... Bastaria indicar a tag a:

div#Main a {
	display:block;
	width:200px;
	height:50px;
}

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Henrique Barcelos 290]

Só complementando, eu uso sempre assim:

 

div#nomediv

 

Eu faço diferente...

 

Como div é o elemento que de longe mais usamos, quando é div eu deixo sem nada antes e apenas coloco o nome da tag antes do id se não for uma div http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif