Como combinar classe e ID no seletor CSS?

221

Se eu tiver a seguinte div:

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

Existe uma maneira de definir um estilo que expresse a idéia "Uma div com id='content'AND class='myClass'"?

Ou você simplesmente segue um caminho ou outro como em

<div class="content-sectionA">
    Lorem Ipsum...
</div>

Ou

<div id="content-sectionA">
    Lorem Ipsum...
</div>
Larsenal
fonte
2
se você deseja selecionar por ID, não há necessidade de selecionar também por classe, porque o ID é único, portanto, apenas um elemento corresponderá. Assim, adicionando a classe para o mesmo seletor é a digitação extra apenas
TStamper
20
@ TStamper: Não necessariamente. Você está pensando apenas em termos de documentos estáticos. img#InboxNesse caso, você pode ter um ícone em sua página normalmente definido como 50% de opacidade. No entanto, quando o usuário tem uma mensagem, você deseja que ela seja definida como 100% de opacidade, e o back-end indica isso adicionando uma activeclasse ao elemento. Nesse cenário, faz sentido ter um seletor que combine ID e nome da classe.
Lèse majesté
@ TStamper: Além disso, não ter o seletor de combinação de ID + classe mais específico oferece mais peso / precedência do que a versão de ID sozinha? AFAIK, deveria. (IOW, as regras do ID + classe do seletor de combinação irá substituir as regras do seletor de ID de combinação (Esta foi a minha razão / necessidade de encontrar esta discussão agora)..
govinda
Então, eu estou tendo uma situação semelhante. Por exemplo, tenho muitos produtos que têm descrições, mas também gostariam de ter controle específico sobre produtos individuais. Posso fazer: code<p id = Produto_1 classe = Produto> Produto 1 </p> <p id = Produto_2 classe = Produto> Produto 2 </p> code Isso permite o estilo geral de todos os produtos, mas também o estilo individual de produtos específicos?
Tamer Ziady

Respostas:

327

Na sua folha de estilo:

div#content.myClass

Editar: Isso também pode ajudar:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

e, por seu exemplo:

div#content.sectionA

Editar, 4 anos depois: como é muito antigo e as pessoas continuam encontrando: não use o tagNames nos seus seletores. #content.myClassé mais rápido do que div#content.myClassporque o tagName adiciona uma etapa de filtragem que você não precisa. Use tagNames nos seletores apenas onde for necessário!

ajm
fonte
31
Especificar que o ID pertence a uma div só pode ser prejudicial ao desempenho da renderização (embora praticamente insignificante) sem nenhum benefício, pois um ID já é exclusivo. Eu usaria # content.myClass para torná-lo limpo.
mystrdat
3
div.class#iddeve ser equivalente, embora menos recomendado; use partes mais exclusivas do seletor primeiro.
SF.
1
Bem, obrigado pelo seu esforço, mesmo depois de anos :). Ainda ajudando caras como eu. Apenas usei para o meu projeto. Votado com certeza.
C4d
76

Existem diferenças entre #header .calloute #header.calloutem css.

Aqui está o "inglês simples" de #header .callout:
Selecione todos os elementos com o nome da classe calloutque são descendentes do elemento com um ID de header.

E #header.calloutsignifica:
Selecione o elemento que possui um ID headere também um nome de classe callout.

Você pode ler mais aqui truques css

Reza Abbasi
fonte
Eu cometi este erro com espaços em branco: .class #id vs # id.class
ERJAN
5

Não há nada de errado em combinar um id e uma classe em um elemento, mas você não precisa identificá-lo por ambos para uma regra. Se você realmente quer, pode fazer:

#content.sectionA{some rules}

Você não precisa da divfrente do ID, como outros sugeriram.

Em geral, as regras CSS específicas para esse elemento devem ser definidas com o ID, e elas terão um peso maior do que as da classe. As regras especificadas pela classe seriam propriedades que se aplicam a vários itens que você não deseja alterar em vários locais sempre que precisar ajustar.

Isso se resume a isso:

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

Faz sentido?

Gabriel Hurley
fonte
4

Bem, geralmente você não precisa classificar um elemento especificado por id, porque id é sempre único, mas se você realmente precisar, o seguinte deve funcionar:

div#content.sectionA {
    /* ... */
}
Blixt
fonte
1

Você pode combinar ID e Classe em CSS, mas os IDs devem ser exclusivos, portanto, a adição de uma classe a um seletor de CSS a qualificaria em excesso.

Eric Wendelin
fonte
Este é um bom ponto. Estou pensando se talvez você tenha um conjunto de classes muito gerais (definindo coisas como flutuação, altura / largura, talvez coisas como fonte) e gostaria de substituir algo nelas nesta exceção única?
22909 ajm
5
A menos que você use a mesma folha de estilo com páginas diferentes. :-)
Patrick McElhaney
5
Outro exemplo: quando as aulas são adicionados dinamicamente com Javascript (# optionalFields.enabled)
Patrick McElhaney
Mesmo se você usar a mesma folha de estilo com páginas diferentes, seria realmente melhor colocar uma classe no corpo ou ter um estilo para o ID e depois separar as definições de classe para as classes com os estilos de substituição apropriados.
Eric Wendelin
Sim, acho que é bastante comum fazer isso. por exemplo, li # SomeTab.state-selected
Yablargo
1

use: tag.id ; tag#classnas variáveis ​​de tag em seu css.

Lan ...
fonte
1
Eu acho que você misturou um pouco - tag.class e tag # id, não?
Harijs Krūtainis 15/11
0

Os IDs devem ter um documento único, portanto você não deve selecionar com base em ambos. Você pode atribuir um elemento a várias classes embora comclass="class1 class2"

Ben Hughes
fonte
1
A turma pode mudar. Por exemplo, você pode ter div # id.active e div # id.inactive.
22730 Daniel Moura
justo o suficiente, pense bem, usei essa funcionalidade, mas não entendi qual era o comportamento desejado.
22909 Ben Hughes
0

Eu acho que você está errado. IDs versus classe não é uma questão de especificidade; eles têm usos lógicos completamente diferentes.

Os IDs devem ser usados ​​para identificar partes específicas de uma página: o cabeçalho, a barra de navegação, o artigo principal, a atribuição do autor, o rodapé.

As classes devem ser usadas para aplicar estilos à página. Digamos que você tenha um site de revista geral. Cada página do site terá os mesmos elementos - cabeçalho, navegação, artigo principal, barra lateral, rodapé. Mas sua revista tem seções diferentes - economia, esportes, entretenimento. Você deseja que as três seções tenham aparência diferente - economia conservadora e quadrada, ação esportiva, entretenimento brilhante e jovem.

Você usa classes para isso. Você não precisa criar vários IDs - # artigo de economia e # artigo de esporte e # artigo de entretenimento. Isso não faz sentido. Em vez disso, você definiria três classes, economia, esportes e entretenimento, depois definiria os IDs #nav, #article e #footer para cada um.

Greg
fonte
Na verdade, você pode usar tags HTML semânticas em vez de IDs para a maioria dos elementos mencionados. As tags de cabeçalho, rodapé, navegação, seção etc. existem por um motivo.
Walter Schwarz
Mas, de fato, você deve usar apenas IDs para elementos que devem ser únicos, singletons. Mas, mesmo assim, isso é realmente útil se você precisar acessar esse elemento via JavaScript, porque o uso de IDs torna seu CSS muito específico e difícil de se mesclar posteriormente com outros CSS e / ou HTML. Há também o argumento de que os IDs são mais rápidos que as classes, mas a diferença é verdadeiramente insignificante.
Walter Schwarz
-1
.sectionA[id='content'] { color : red; }

Não funcionará quando o doctype for html 4.01 ...

BoltClock
fonte