Como combinar classe e ID no seletor CSS?

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>

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!

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

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?

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 {
    /* ... */
}

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.

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

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"

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.

.sectionA[id='content'] { color : red; }

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