CSS de varios elementos en una línea...

[bittxo]

A ver si así me explico mejor:


- Carrito (listado de productos):

<div id="maincontainer" class="sccatalog itemlist">
<div class="sectiontbarea">
Título
</div>
</div>

- Carro (detalle de un producto)

<div id="maincontainer" class="sccatalog itemdetail">
<div class="sectiontbarea">
Título
</div>
</div>




- Blog (listado de entradas):

<div id="maincontainer" class="blogarticles itemlist">
<div class="sectiontbarea">
Título
</div>
</div>

- Blog (detalle de una entrada):

<div id="maincontainer" class="blogarticles itemlist">
<div class="sectiontbarea">
Título
</div>
</div>





Esto hacen cuatro páginas. Quiero que cada una sea diferente, sin embargo lo que consigo con mi css, es que las dos itemlist sean iguales y las dos itemdetail sean iguales. Se copian una a otra, por el nombre similar.


- Código CSS

#maincontainer.sccatalog.itemlist .sectiontbarea {
border: 1px solid #F00;
}

#maincontainer.sccatalog.itemdetail.sectiontbarea {
border: 2px solid #F00;
}

#maincontainer.blogarticles.itemdetail.sectiontbar ea {
border: 3px solid #666;
}

#maincontainer.blogarticles.itemlist .sectiontbarea {
border: 6px solid #666;
}








No sé si me entiendes ahora. Poniendo esos códigos, en Mozilla se ve bien pero en Iexplorer no.