Qual é a diferença entre um id e uma classe?

Qual é a diferença entre <div class="">e <div id="">quando se trata de CSS? Está tudo bem em usar <div id="">?

Eu vejo diferentes desenvolvedores fazendo isso de ambas as formas e, como sou autodidata, nunca realmente descobri isso.

idsdeve ser único, onde classpode ser aplicado a muitas coisas. Em CSS, ids se parecem #elementIDe classelementos se parecem.someClass

Em geral, use idsempre que quiser se referir a um elemento específico e classquando tiver várias coisas semelhantes. Por exemplo, comuns idelementos são coisas como header, footer, sidebar. classElementos comuns são coisas como highlightou external-link.

É uma boa idéia ler sobre a cascata e entender a precedência atribuída a vários seletores: http://www.w3.org/TR/CSS2/cascade.html

A precedência mais básica que você deve entender, no entanto, é que os idseletores têm precedência sobre os classseletores. Se você tivesse isso:

<p id="intro" class="foo">Hello!</p>

e:

#intro { color: red }
.foo { color: blue }

O texto seria vermelho porque o idseletor tem precedência sobre o classseletor.

Talvez uma analogia ajude a entender a diferença:

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

Os cartões de identificação de estudante são distintos. Dois estudantes no campus não terão o mesmo cartão de identificação de estudante . No entanto, muitos estudantes podem e compartilharão pelo menos uma classe entre si.

Não há problema em colocar vários alunos sob um título de turma , como Biologia. Mas nunca é aceitável colocar vários alunos sob uma identificação de estudante .

Ao fornecer regras pelo sistema de intercomunicação da escola, você pode atribuir regras a uma turma :

"Amanhã, todos os alunos deverão usar uma camisa vermelha na aula de Biologia."

.Biology {
  color: red;
}

Ou você pode atribuir regras a um aluno específico, chamando seu ID exclusivo :

"Jonathan Sampson deve vestir uma camisa verde amanhã."

#JonathanSampson {
  color: green;
}

Nesse caso, Jonathan Sampson está recebendo dois comandos: um como aluno na aula de Biologia e outro como requisito direto. Como Jonathan foi orientado diretamente, por meio do atributo id, a usar uma camisa verde, ele desconsiderou a solicitação anterior de usar uma camisa vermelha.

Os seletores mais específicos vencem.

Onde usar um ID versus uma classe

A diferença simples entre as duas é que, embora uma classe possa ser usada 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 esteja marcando o conteúdo principal da página, pois haverá apenas uma seção de conteúdo principal. Por outro lado, você deve usar uma classe para configurar cores de linha alternadas em uma tabela, pois, por definição, serão usadas mais de uma vez.

Os IDs são uma ferramenta incrivelmente poderosa. Um elemento com um ID pode ser o destino de um pedaço de JavaScript que manipula o elemento ou seu conteúdo de alguma forma. O atributo ID pode ser usado como destino de um link interno, substituindo tags de âncora por atributos de nome. Por fim, se você tornar seus IDs claros e lógicos, eles poderão 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 declarando que um bloco de código conterá o conteúdo principal se a tag de abertura do bloco tiver um ID de, digamos, "principal", "cabeçalho", "rodapé "etc.

Um ID deve ser exclusivo em toda a página.

Uma classe pode se aplicar a muitos elementos.

Às vezes, é uma boa ideia usar IDs.

Em uma página, você geralmente tem um rodapé, um cabeçalho ...

Em seguida, o rodapé pode estar em uma div com um id

<div id = "rodapé" class = "...">

e ainda tem aula

Uma CLASSE deve ser usada para vários elementos para os quais você deseja o mesmo estilo. Um ID deve ser para um elemento exclusivo. Veja este tutorial .

Você deve consultar os padrões do W3C se quiser ser um conformista estrito ou se deseja que suas páginas sejam validadas para os padrões.

IDs são únicos. As aulas não são. Os elementos também podem ter várias classes. Também as classes podem ser adicionadas e removidas dinamicamente a um elemento.

Em qualquer lugar em que você possa usar um ID, poderá usar uma classe. O contrário não é verdade.

A convenção parece usar IDs para elementos da página que estão em todas as páginas (como "barra de navegação" ou "menu") e classes para todo o resto, mas isso é apenas convenção e você encontrará uma grande variação no uso.

Uma outra diferença é que, para os elementos de entrada do formulário, o <label>elemento faz referência a um campo por ID; portanto, você precisa usar IDs se quiser usá-lo <label>. é uma questão de acessibilidade e você realmente deve usá-lo.

Nos anos passados, os IDs também eram os preferidos porque eram facilmente acessíveis em Javascript (getElementById). Com o advento do jQuery e outras estruturas Javascript, isso é praticamente um problema agora.

Classes são como categorias. Muitos elementos HTML podem pertencer a uma classe e um elemento HTML pode ter mais de uma classe. As classes são usadas para aplicar estilos gerais ou estilos que podem ser aplicados em vários elementos HTML.

IDs são identificadores. Eles são únicos; ninguém mais pode ter o mesmo ID. Os IDs são usados ​​para aplicar estilos exclusivos a um elemento HTML.

Eu uso IDs e classes desta maneira:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

Neste exemplo, as seções de cabeçalho e conteúdo podem ser estilizadas por meio de #header e #content. Cada seção do conteúdo pode ser aplicada em um estilo comum por meio da seção #content. Apenas por diversão, adicionei uma classe "especial" para a seção do meio. Suponha que você queira que uma seção específica tenha um estilo especial. Isso pode ser alcançado com a classe .special, mas a seção ainda herda os estilos comuns da seção #content.

Quando desenvolvo JavaScript ou CSS, normalmente uso IDs para acessar / manipular um elemento HTML muito específico e uso classes para acessar / aplicar estilos a uma ampla variedade de elementos.

CSS é orientado a objetos. ID diz instância, classe diz classe.

Ao aplicar o CSS, aplique-o a uma classe e tente evitar o máximo possível de um ID. O ID deve ser usado apenas em JavaScript para buscar o elemento ou para qualquer ligação de evento.

Classes devem ser usadas para aplicar CSS.

Às vezes, você precisa usar classes para associação de eventos. Nesses casos, tente evitar as classes que estão sendo usadas para aplicar o CSS e adicione novas classes que não tenham o CSS correspondente. Isso ajudará quando você precisar alterar o CSS para qualquer classe ou alterar o nome da classe CSS todos juntos para qualquer elemento.

O espaço do seletor CSS realmente permite o estilo de identificação condicional:

h1#my-id {color:red}
p#my-id {color:blue}

será renderizado conforme o esperado. Por que você faria isso? Às vezes, os IDs são gerados dinamicamente etc. Um outro uso foi renderizar títulos de maneira diferente com base em uma atribuição de ID de alto nível:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

Pessoalmente, prefiro seletores de nome de classe mais longos:

body#list-page .title-block > h1 {font-size:56px}

como acho que o uso de IDs aninhados para diferenciar o tratamento é um pouco perverso. Saiba apenas que, à medida que os desenvolvedores do mundo Sass / SCSS colocam as mãos nessas coisas, IDs aninhados estão se tornando a norma.

Finalmente, quando se trata de desempenho e precedência do seletor, o ID tende a vencer. Este é outro assunto.

Qualquer elemento pode ter uma classe ou um ID.

Uma classe é usada para fazer referência a um determinado tipo de exibição; por exemplo, você pode ter uma classe css para uma div que represente a resposta a esta pergunta. Como haverá muitas respostas, várias divs precisariam do mesmo estilo e você usaria uma classe.

Um id refere-se a apenas um único elemento; por exemplo, a seção relacionada à direita pode ter um estilo específico para ele não ser reutilizado em outro lugar; ele usaria um id.

Tecnicamente, você pode usar classes para tudo isso ou dividi-las logicamente. Você não pode, no entanto, reutilizar IDs para vários elementos.

Classe é para aplicar seu estilo a um grupo de elementos. Os estilos de ID aplicam-se apenas ao elemento com esse ID (deve haver apenas um). Geralmente você usa classes, mas se houver uma única, poderá usar IDs (ou simplesmente inserir o estilo diretamente no elemento).

Nos IDs de desenvolvimento avançado , podemos basicamente usar JavaScript.

Para propósitos repetíveis, as classes são úteis contrariamente aos IDs que deveriam ser únicos.

Abaixo está um exemplo que ilustra as expressões acima:

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

Agora você pode ver aqui boxe box1existem dois (2) <div>elementos diferentes , mas podemos aplicar as classes boxe bg-color-reda ambos.

O conceito é herança em uma linguagem OOP .

1) div id não é reutilizável e deve ser aplicado apenas a um elemento do HTML, enquanto a classe div pode ser adicionada a vários elementos.

2) Um ID tem maior importância se ambos forem aplicados ao mesmo elemento e tiver estilos conflitantes, os estilos do ID serão aplicados.

3) O elemento Style sempre refere uma classe div colocando a. (ponto) na frente de seus nomes, enquanto a classe div id é referida, colocando um # (hash) na frente de seus nomes.

4) Exemplo: -

classe na <style>declaração -.red-background { background-color: red; }

id na <style>declaração - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> Aqui o fundo será na cor azul

ide classsão dois atributos HTML globais / padrão (Os atributos globais abaixo podem ser usados ​​em qualquer elemento HTML.)

class Especifica um ou mais nomes de classe para um elemento (refere-se a uma classe em uma folha de estilos)

id Especifica um ID exclusivo para um elemento

Os atributos id fornecem um elemento identificador exclusivo em todo o documento, em que o atributo class fornece uma maneira de classificar elementos semelhantes.

O valor do atributo id deve ser exclusivo na página HTML, em que o atributo de classe pode ser reutilizado sempre que você desejar aplicar as mesmas propriedades

Class é usado para vários elementos que possuem atributos comuns. Por exemplo, se você deseja a mesma cor e fonte para a tag body e body use o atributo class ou em uma própria divisão.

Por outro lado, o ID é usado para destacar atributos de um único elemento e usado exclusivamente apenas para um elemento específico. Por exemplo, temos uma tag h1 com alguns atributos que não queremos que eles se repitam em outros elementos da página.

Note-se que, se usarmos classe e id em um elemento, * id substituirá os atributos da classe. * Simplesmente porque id é exclusivo para um único elemento

Consulte o exemplo abaixo

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

Geramos a saída

Resultado