Eu tenho esse layout:

<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>

Com estas regras 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; }

Eu uso o jQuery para adicionar ounassigned classe para setores que não têm uma das classesalpha, beta ougamma:

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

Então eu aplico algumas regras diferentes para essa classe:

#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;
}

E tudo funciona perfeitamente nos navegadores modernos.

Visualização interativa jsFiddle

Mas vendo como o:not() seletor em jQuery é baseado em:not() em CSS3Eu estava pensando que poderia movê-lo diretamente para minha folha de estilo, para que eu não tivesse que confiar em adicionar uma classe extra usando jQuery. Além disso, eu não estou realmente interessado em suportar versões mais antigas do IE, e outros navegadores têm excelente suporte para o:not() selector.

Então eu tento mudar o.unassigned porção acima disso (sabendo que eu terei apenas setores Α, Β e Γ no meu layout):

#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;
}

Mas assim que faço isso, ele pára de trabalhartodos os navegadores! Meus setores não atribuídos não estão mais esmaecidos, desbotados ou rotulados como "Não atribuídos".

Visualização jsFiddle atualizada, mas não tão interativa

Por que o:not() selector funciona em jQuery mas falha em CSS? Não deveria funcionar de forma idêntica em ambos os locais, já que o jQuery afirma ser "CSS3 Compliant", ou há algo que eu esteja perdendo?

Existe uma solução CSS pura para isso ou eu vou ter que confiar em um script?