Tengo este diseño:

<div id="sectors">
    <h1>Sectors</h1>
    <div id="s7-1103" class="alpha"></div>
    <div id="s8-1104" class="alpha"></div>
    <div id="s1-7605" class="beta"></div>
    <div id="s0-7479"></div>
    <div id="s2-6528" class="gamma"></div>
    <div id="s0-4444"></div>
</div>

Con estas reglas CSS:

#sectors {
    width: 584px;
    background-color: #ffd;
    margin: 1.5em;
    border: 4px dashed #000;
    padding: 16px;
    overflow: auto;
}

#sectors > h1 {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}

#sectors > div {
    float: left;
    position: relative;
    width: 180px;
    height: 240px;
    margin: 16px 0 0 16px;
    border-style: solid;
    border-width: 2px;
}

#sectors > div::after {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
    background-color: rgba(255, 255, 255, 0.8);
    border-top: 2px solid;
    content: attr(id) ' - ' attr(class);
}

#sectors > div:nth-of-type(3n+1) {
    margin-left: 0;
}

#sectors > div.alpha { color: #b00; background-color: #ffe0d9; }
#sectors > div.beta  { color: #05b; background-color: #c0edff; }
#sectors > div.gamma { color: #362; background-color: #d4f6c3; }

Yo uso jQuery para agregar elunassigned clase a sectores que de otra manera no tienen una de las clasesalpha, beta ogamma:

$('#sectors > div:not(.alpha, .beta, .gamma)').addClass('unassigned');

Luego aplico algunas reglas diferentes a esa clase:

#sectors > div.unassigned {
    color: #808080;
    background-color: #e9e9e9;
    opacity: 0.5;
}

#sectors > div.unassigned::after {
    content: attr(id) ' - Unassigned';
}

#sectors > div.unassigned:hover {
    opacity: 1.0;
}

Y todo funciona perfectamente en los navegadores modernos.

Vista previa interactiva de jsFiddle

Pero viendo como:not() selector en jQuery está basado en:not() en CSS3Estaba pensando que podría moverlo directamente a mi hoja de estilo para no tener que confiar en agregar una clase extra usando jQuery. Además, no estoy realmente interesado en admitir versiones anteriores de IE, y otros navegadores tienen un excelente soporte para:not() selector.

Así que trato de cambiar el.unassigned parte superior a esto (sabiendo que solo tendré los sectores Α, Β y Γ en mi diseño):

#sectors > div:not(.alpha, .beta, .gamma) {
    color: #808080;
    background-color: #e9e9e9;
    opacity: 0.5;
}

#sectors > div:not(.alpha, .beta, .gamma)::after {
    content: attr(id) ' - Unassigned';
}

#sectors > div:not(.alpha, .beta, .gamma):hover {
    opacity: 1.0;
}

Pero tan pronto como hago esto, deja de funcionar.todos los navegadores! Mis sectores no asignados ya no aparecen en gris, se desvanecen o se etiquetan como "Sin asignar".

Vista previa jsFiddle actualizada pero no tan interactiva

¿Por qué la:not() ¿El selector funciona en jQuery pero falla en CSS? ¿No debería funcionar de manera idéntica en ambos lugares ya que jQuery afirma ser "compatible con CSS3" o hay algo que me falta?

¿Hay una solución CSS pura para esto o tendré que confiar en un script?