div class vs id

Question

Ao usar divs quando é melhor usar uma classe vs id?

É melhor usar classe, em dizer variante fonte ou elementos dentro do html? Em seguida, use id para a estrutura / contentores?

Este é algo que eu sempre fui um pouco sobre incerto, qualquer ajuda seria ótimo.

Answer 1

Use id para identificar elementos que haverá apenas uma única instância de em uma página. Por exemplo, se você tem uma única barra de navegação que você está colocando em um local específico, o uso id="navigation".

Use class para agrupar elementos que todos se comportam de determinada maneira. Por exemplo, se você quiser o nome da empresa para aparecer em negrito no corpo do texto, que você pode usar <span class='company'>.

Answer 2

A coisa mais importante a entender é que IDs têm de ser único: apenas um elemento com um determinado ID deve existir dentro de uma página. Assim, se você está querendo se referir a um elemento de página específica, que é muitas vezes a melhor coisa para usar.

Se você tem vários elementos que são de alguma forma semelhante, você deve usar a classe elementos para identificá-los.

Um fato muito útil, surpreendentemente pouco conhecido é que você pode realmente aplicar várias classes para um único elemento, colocando espaços entre os nomes de classe. Assim, se você postou uma pergunta que foi escrito pelo usuário conectado no momento, você pode identificá-lo com o

.

Pense Universidade.

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

Student id cartões são distintos. Não há duas estudantes no campus terá o mesmo aluno ID cartão. No entanto, muitos estudantes podem e irão compartilhar pelo menos uma Class uns com os outros.

Não há problema em colocar vários alunos sob um Class título, Biologia 101. Mas nunca é aceitável colocar vários alunos sob um aluno ID .

Ao dar Regras sobre o sistema escolar interfone, você pode dar Regras para Class :

"Será que a classe Biologia favor usar camisas vermelhas amanhã?"

.BiologyClass {
  shirt-color:red;
}

Ou você pode dar regras a um aluno específico, chamando sua única ID :

"Será Jonathan Sampson por favor usar uma camisa verde amanhã?"

#JonathanSampson {
  shirt-color:green;
}

IDs devem ser únicos, mas em CSS eles também têm prioridade quando descobrir qual dos dois conflitantes instruções a seguir.

<div id="section" class="section">Text</div>

#section {font-color:#fff}
.section {font-color:#000}

O texto seria branco.

aulas são grandes quando você deseja aplicar estilos semelhantes a muitas divs ou elementos diferentes. ids são boas quando você quiser endereçar um elemento específico para formatar ou para atualizar com javascript.

Um benefício adicional ao uso de um ID é a capacidade de direcionar-lo em uma marca de âncora:

<h2 id="CurrentSale">Product I'm selling</h2>

permitirá que você em alguma outra ligação local diretamente para esse local na página:

<a href="#CurrentSale">the Current Sale</a>

Um uso comum para isso seria dar a cada manchete em um blog um ID datestamped (id digamos = "date20080408") que lhe permitiria visar especificamente a seção da página do blog.

Também é importante lembrar que existem regras de nomenclatura mais restritas para ids, principalmente que eles não podem começar com um número. Veja a pergunta tão semelhantes: O que é um valor válido para id atributos de html

O próprio padrão HTML responde a sua pergunta:

Não existem dois objetos podem ter a mesma identificação, mas uma quantidade arbitrariamente de objetos podem ter a mesma classe.

Então, se você deseja aplicar certos atributos de estilo CSS para apenas uma única DIV, que seria um ID. Se você quiser determinados atributos de estilo para aplicar a vários DIVs, que deve ser uma classe.

Note que você pode misturar as duas coisas. Você pode fazer duas DIVs pertencem à mesma classe, mas dar-lhes identificações diferentes. Você pode então aplicar o comum estilo tanto para a classe, e as coisas específicas para qualquer um ao seu ID. O navegador irá aplicar primeiro o estilo de classe e, em seguida, o estilo ID, então estilos ID pode substituir qualquer que seja a classe definiu antes.

Algumas outras coisas para manter em mente:

• Ao usar ASP.Net você não tem controle total sobre o ID de elementos, assim você praticamente tem que classe de uso (note que este é menos verdadeiro do que era antes).

• É melhor usar não , quando você pode ajudá-lo. Em vez disso, especifique o tipo de elemento e de tipo de pai . Por exemplo, uma lista não ordenada contido div dentro com a classe NAVAREA poderia ser apontada desta maneira:

  div.NavArea ul { /* styles go here */ }
  

Agora você pode estilizar o divisão lógica para muito de toda a sua NAVAREA com a aplicação de uma classe.

IDs devem ser únicos. Classes devem ser compartilhadas. Então, se você tem algum CSS formatação que será aplicada a múltiplos DIV, use uma classe. Se apenas um (como um requisito, não como casualidade), use um ID.

Eu acho que todos nós sabemos que classe é, mas se você pensar de IDs como identificadores em vez de ferramentas de estilo, você não vai dar muito errado. Você precisa de um identificador ao tentar alvo alguma coisa e se você tiver mais de um item com o mesmo ID, você não pode identificá-lo ...

Quando se trata de escrever seu css para IDs e classes, é benéfico para usar classes css mínimas, tanto quanto possível e tentar não ficar muito pesado com os IDs até que você tem que, caso contrário você vai ser constantemente com o objetivo de gravação declarações mais fortes e logo tem um arquivo css cheio de! importante.

Onde usar um ID versus uma classe

A simples diferença entre os dois é que enquanto uma classe pode ser usado repetidamente em uma página, um ID deve ser usado apenas uma vez por página. Portanto, é apropriado usar um ID no elemento div que está marcando-se o conteúdo principal da página, como só haverá uma seção de conteúdo principal. Em contraste, você deve usar uma classe para configurar cores de linha alternadas em uma mesa, como eles são, por definição, vai ser usado mais de uma vez.

IDs são uma ferramenta incrivelmente poderosa. Um elemento com um ID pode ser alvo de um pedaço de JavaScript que manipula o elemento ou o seu conteúdo de alguma forma. O atributo ID pode ser usado como o destino de uma ligação interna, substituindo marcas de âncora com atributos de nome. Finalmente, se você faz seus IDs clara e lógica, eles podem servir como uma espécie de “auto-documentação” dentro do documento. Por exemplo, você não precisa necessariamente adicionar um comentário antes de um bloco afirmando que um bloco de código irá conter o conteúdo principal se o tag do bloco de abertura tem um ID de, digamos, "cabeçalho", "footer "main" ", etc.

Se é um estilo que deseja usar em vários lugares em uma página, use uma classe. Se você quer um monte de personalização para um único objeto, digamos, uma barra de navegação no lado da página, em seguida, um id é o melhor, porque você não é provável a necessidade de que combinação de estilos em qualquer outro lugar.

ID é suposto ser o identificador único elemento na página, o que ajuda a manipulá-lo. Qualquer estilo externamente CSS definido que é suposto ser usado em mais de um elemento deve ir para o atributo de classe

<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>

Use um ID para um elemento exclusivo na página que você quer fazer algo muito específico com, e uma classe para algo que você pode reutilizar em outras partes da página.

O id atributo é utilizado para elementos para identificar exclusivamente-los dentro do documento, enquanto que o class atributo pode ter o mesmo valor compartilhado por muitos elementos no mesmo documento.

Então, realmente, se há apenas um elemento por documento que vai usar o estilo (por exemplo, #title), então vá com id . Se vários elementos pode usar o estilo, ir com class .

Eu diria que é melhor usar uma classe sempre que você pensa um elemento de estilo vai ser repetida em uma página. Itens como HeaderImage, FooterBar e afins vão bem como um ID já que você só vai usá-lo uma vez e ele vai ajudar a impedi-lo de duplicá-lo acidentalmente, uma vez que alguns editores irá alertá-lo quando você tem IDs duplicados.

Eu também posso ver que é útil se você estiver indo para gerar os elementos div dinamicamente, e quer segmentar um item específico para formatação; você pode apenas dar-lhe a identificação adequada em geração ao invés de procurar o elemento e, em seguida, atualizar sua classe.

Meu sabor de escolha é usar identificação de classe quando os estilos CSS são aplicadas a vários divs no mesmo caminho. Se a estrutura ou recipiente é realmente aplicado apenas uma vez, ou pode herdar seu estilo a partir do padrão, não vejo nenhuma razão para identificação de classe utilização.

Por isso, vai depender de se a sua div é um dos vários; por exemplo, um div representando uma pergunta para uma resposta no site stackoverflow. Aqui você gostaria de definir o estilo para a classe "Resposta" e aplicar isso a cada div "Resposta".

Se você estiver usando controles .Net web, em seguida, às vezes é muito mais fácil apenas para classes de uso, como em tempo de execução .Net altera contol web do div id (onde eles estão usando runat = "server").

Usando classes permite que você facilmente construir-se estilos com classes separadas para fontes, espaçamento, faz fronteira etc. I geralmente usam vários arquivos para armazenar tipos diferentes de informações de formatação, por exemplo, basic_styles.css para site simples ampla formatação, ie6_styles.css para estilos específicos navegador (neste caso IE6) etc e template_1.css para obter informações layout.

Que sempre maneira que você escolher tentar ser consistente com a manutenção da ajuda.

Como assim, um elemento você dá um ID específico para pode ser manipulado através de JavaScript e DOM comandos -. GetElementById, por exemplo

Em geral, acho que é útil para dar todas as principais divs estruturais um id - mesmo que, inicialmente, eu não tenho nenhuma regra específica CSS para aplicar, eu tenho essa capacidade existe para o futuro. Por outro lado, eu uso classes para os elementos que poderiam ser usados ??várias vezes - por exemplo, um div que contém uma imagem e legenda - Eu poderia ter várias classes, cada um com um pouco diferentes valores de estilo

.

Lembre-se, porém, todas as coisas são iguais, as regras de estilo em uma especificação id prevalecem sobre as de uma especificação de classe.

Além de IDs e classes que estão sendo ótimo para definir o estilo de um item individual versos um conjunto semelhante de itens, há também uma outra ressalva para lembrar. Também depende do idioma em algum grau. Em ASP.Net, você pode jogar em Div de e têm de id. Mas, se você usar um painel em vez da Div você vai perder o id.

As aulas são de estilos que você pode usar várias vezes em uma página, IDs são identificadores exclusivos que definem casos especiais para elementos. As normas dizem que IDs deve ser utilizado apenas uma vez em uma página. Portanto, você deve usar classes para quando você quiser usar um estilo em mais de um elemento em uma página, e um ID quando você só quer usá-lo uma vez.

Outra coisa é que para as classes que você pode usar vários valores (por colocar espaços entre cada classe, a la "class = 'blagh blah22 blah') wheras com IDs, você só pode usar em ID por elemento.

Estilos definidos para estilos de substituição de IDs definidos para as classes, assim, em, as configurações de estilo de #uniquething irá sobrepor o estilo de .Whatever em caso de conflito.

Então você provavelmente deve usar IDs para coisas como, o cabeçalho, o seu 'barra lateral' ou o que quer, e assim por diante -. Coisas que só aparecem uma vez por página

Para mim:. Se uso aulas quando eu vou fazer alguma coisa em CSS ou adicione o nome aos elementos e pode usar em todos os elementos em uma página

Assim, IDs eu uso para elemento único

Ex:

<div id="post-289" class="box clear black bold radius">

CSS:

.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}

Answer 3

Pense Universidade.

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

Student id cartões são distintos. Não há duas estudantes no campus terá o mesmo aluno ID cartão. No entanto, muitos estudantes podem e irão compartilhar pelo menos uma Class uns com os outros.

Não há problema em colocar vários alunos sob um Class título, Biologia 101. Mas nunca é aceitável colocar vários alunos sob um aluno ID .

Ao dar Regras sobre o sistema escolar interfone, você pode dar Regras para Class :

"Será que a classe Biologia favor usar camisas vermelhas amanhã?"

.BiologyClass {
  shirt-color:red;
}

Ou você pode dar regras a um aluno específico, chamando sua única ID :

"Será Jonathan Sampson por favor usar uma camisa verde amanhã?"

#JonathanSampson {
  shirt-color:green;
}

Answer 4

IDs devem ser únicos, mas em CSS eles também têm prioridade quando descobrir qual dos dois conflitantes instruções a seguir.

<div id="section" class="section">Text</div>

#section {font-color:#fff}
.section {font-color:#000}

O texto seria branco.

Answer 5

aulas são grandes quando você deseja aplicar estilos semelhantes a muitas divs ou elementos diferentes. ids são boas quando você quiser endereçar um elemento específico para formatar ou para atualizar com javascript.

Answer 6

Um benefício adicional ao uso de um ID é a capacidade de direcionar-lo em uma marca de âncora:

<h2 id="CurrentSale">Product I'm selling</h2>

permitirá que você em alguma outra ligação local diretamente para esse local na página:

<a href="#CurrentSale">the Current Sale</a>

Um uso comum para isso seria dar a cada manchete em um blog um ID datestamped (id digamos = "date20080408") que lhe permitiria visar especificamente a seção da página do blog.

Também é importante lembrar que existem regras de nomenclatura mais restritas para ids, principalmente que eles não podem começar com um número. Veja a pergunta tão semelhantes: O que é um valor válido para id atributos de html

Answer 7

O próprio padrão HTML responde a sua pergunta:

Não existem dois objetos podem ter a mesma identificação, mas uma quantidade arbitrariamente de objetos podem ter a mesma classe.

Então, se você deseja aplicar certos atributos de estilo CSS para apenas uma única DIV, que seria um ID. Se você quiser determinados atributos de estilo para aplicar a vários DIVs, que deve ser uma classe.

Note que você pode misturar as duas coisas. Você pode fazer duas DIVs pertencem à mesma classe, mas dar-lhes identificações diferentes. Você pode então aplicar o comum estilo tanto para a classe, e as coisas específicas para qualquer um ao seu ID. O navegador irá aplicar primeiro o estilo de classe e, em seguida, o estilo ID, então estilos ID pode substituir qualquer que seja a classe definiu antes.

Answer 8

Algumas outras coisas para manter em mente:

• Ao usar ASP.Net você não tem controle total sobre o ID de elementos, assim você praticamente tem que classe de uso (note que este é menos verdadeiro do que era antes).

• É melhor usar não , quando você pode ajudá-lo. Em vez disso, especifique o tipo de elemento e de tipo de pai . Por exemplo, uma lista não ordenada contido div dentro com a classe NAVAREA poderia ser apontada desta maneira:

  div.NavArea ul { /* styles go here */ }
  

Agora você pode estilizar o divisão lógica para muito de toda a sua NAVAREA com a aplicação de uma classe.

Answer 9

IDs devem ser únicos. Classes devem ser compartilhadas. Então, se você tem algum CSS formatação que será aplicada a múltiplos DIV, use uma classe. Se apenas um (como um requisito, não como casualidade), use um ID.

Answer 10

Eu acho que todos nós sabemos que classe é, mas se você pensar de IDs como identificadores em vez de ferramentas de estilo, você não vai dar muito errado. Você precisa de um identificador ao tentar alvo alguma coisa e se você tiver mais de um item com o mesmo ID, você não pode identificá-lo ...

Quando se trata de escrever seu css para IDs e classes, é benéfico para usar classes css mínimas, tanto quanto possível e tentar não ficar muito pesado com os IDs até que você tem que, caso contrário você vai ser constantemente com o objetivo de gravação declarações mais fortes e logo tem um arquivo css cheio de! importante.

Answer 11

Onde usar um ID versus uma classe

A simples diferença entre os dois é que enquanto uma classe pode ser usado repetidamente em uma página, um ID deve ser usado apenas uma vez por página. Portanto, é apropriado usar um ID no elemento div que está marcando-se o conteúdo principal da página, como só haverá uma seção de conteúdo principal. Em contraste, você deve usar uma classe para configurar cores de linha alternadas em uma mesa, como eles são, por definição, vai ser usado mais de uma vez.

IDs são uma ferramenta incrivelmente poderosa. Um elemento com um ID pode ser alvo de um pedaço de JavaScript que manipula o elemento ou o seu conteúdo de alguma forma. O atributo ID pode ser usado como o destino de uma ligação interna, substituindo marcas de âncora com atributos de nome. Finalmente, se você faz seus IDs clara e lógica, eles podem servir como uma espécie de “auto-documentação” dentro do documento. Por exemplo, você não precisa necessariamente adicionar um comentário antes de um bloco afirmando que um bloco de código irá conter o conteúdo principal se o tag do bloco de abertura tem um ID de, digamos, "cabeçalho", "footer "main" ", etc.

Answer 12

Se é um estilo que deseja usar em vários lugares em uma página, use uma classe. Se você quer um monte de personalização para um único objeto, digamos, uma barra de navegação no lado da página, em seguida, um id é o melhor, porque você não é provável a necessidade de que combinação de estilos em qualquer outro lugar.

Answer 13

ID é suposto ser o identificador único elemento na página, o que ajuda a manipulá-lo. Qualquer estilo externamente CSS definido que é suposto ser usado em mais de um elemento deve ir para o atributo de classe

<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>

Answer 14

Use um ID para um elemento exclusivo na página que você quer fazer algo muito específico com, e uma classe para algo que você pode reutilizar em outras partes da página.

Answer 15

O id atributo é utilizado para elementos para identificar exclusivamente-los dentro do documento, enquanto que o class atributo pode ter o mesmo valor compartilhado por muitos elementos no mesmo documento.

Então, realmente, se há apenas um elemento por documento que vai usar o estilo (por exemplo, #title), então vá com id . Se vários elementos pode usar o estilo, ir com class .

Answer 16

Eu diria que é melhor usar uma classe sempre que você pensa um elemento de estilo vai ser repetida em uma página. Itens como HeaderImage, FooterBar e afins vão bem como um ID já que você só vai usá-lo uma vez e ele vai ajudar a impedi-lo de duplicá-lo acidentalmente, uma vez que alguns editores irá alertá-lo quando você tem IDs duplicados.

Eu também posso ver que é útil se você estiver indo para gerar os elementos div dinamicamente, e quer segmentar um item específico para formatação; você pode apenas dar-lhe a identificação adequada em geração ao invés de procurar o elemento e, em seguida, atualizar sua classe.

Answer 17

Meu sabor de escolha é usar identificação de classe quando os estilos CSS são aplicadas a vários divs no mesmo caminho. Se a estrutura ou recipiente é realmente aplicado apenas uma vez, ou pode herdar seu estilo a partir do padrão, não vejo nenhuma razão para identificação de classe utilização.

Por isso, vai depender de se a sua div é um dos vários; por exemplo, um div representando uma pergunta para uma resposta no site stackoverflow. Aqui você gostaria de definir o estilo para a classe "Resposta" e aplicar isso a cada div "Resposta".

Answer 18

Se você estiver usando controles .Net web, em seguida, às vezes é muito mais fácil apenas para classes de uso, como em tempo de execução .Net altera contol web do div id (onde eles estão usando runat = "server").

Usando classes permite que você facilmente construir-se estilos com classes separadas para fontes, espaçamento, faz fronteira etc. I geralmente usam vários arquivos para armazenar tipos diferentes de informações de formatação, por exemplo, basic_styles.css para site simples ampla formatação, ie6_styles.css para estilos específicos navegador (neste caso IE6) etc e template_1.css para obter informações layout.

Que sempre maneira que você escolher tentar ser consistente com a manutenção da ajuda.

Answer 19

Como assim, um elemento você dá um ID específico para pode ser manipulado através de JavaScript e DOM comandos -. GetElementById, por exemplo

Em geral, acho que é útil para dar todas as principais divs estruturais um id - mesmo que, inicialmente, eu não tenho nenhuma regra específica CSS para aplicar, eu tenho essa capacidade existe para o futuro. Por outro lado, eu uso classes para os elementos que poderiam ser usados ??várias vezes - por exemplo, um div que contém uma imagem e legenda - Eu poderia ter várias classes, cada um com um pouco diferentes valores de estilo

.

Lembre-se, porém, todas as coisas são iguais, as regras de estilo em uma especificação id prevalecem sobre as de uma especificação de classe.

Answer 20

Além de IDs e classes que estão sendo ótimo para definir o estilo de um item individual versos um conjunto semelhante de itens, há também uma outra ressalva para lembrar. Também depende do idioma em algum grau. Em ASP.Net, você pode jogar em Div de e têm de id. Mas, se você usar um painel em vez da Div você vai perder o id.

Answer 21

As aulas são de estilos que você pode usar várias vezes em uma página, IDs são identificadores exclusivos que definem casos especiais para elementos. As normas dizem que IDs deve ser utilizado apenas uma vez em uma página. Portanto, você deve usar classes para quando você quiser usar um estilo em mais de um elemento em uma página, e um ID quando você só quer usá-lo uma vez.

Outra coisa é que para as classes que você pode usar vários valores (por colocar espaços entre cada classe, a la "class = 'blagh blah22 blah') wheras com IDs, você só pode usar em ID por elemento.

Estilos definidos para estilos de substituição de IDs definidos para as classes, assim, em, as configurações de estilo de #uniquething irá sobrepor o estilo de .Whatever em caso de conflito.

Então você provavelmente deve usar IDs para coisas como, o cabeçalho, o seu 'barra lateral' ou o que quer, e assim por diante -. Coisas que só aparecem uma vez por página

Answer 22

Para mim:. Se uso aulas quando eu vou fazer alguma coisa em CSS ou adicione o nome aos elementos e pode usar em todos os elementos em uma página

Assim, IDs eu uso para elemento único

Ex:

<div id="post-289" class="box clear black bold radius">

CSS:

.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}