Nuevos selectores de atributo

Código CSS de las cajas:

div[id^="cont"] { width: 300px; height: 200px; margin: 10px; 
                  background-color: aqua; float: left }
div[id*="A"] { width: 50px; height: 50px; margin: 5px; 
               border: 1px solid black;; }
div[id^="capa"] { float: left; }
div[id^="espacio"] { float: right; }

div[id$="A1"] { background-color: yellow; }
div[id$="A2"] { background-color: green; }
div[id$="A3"] { background-color: red; }
div[id$="A4"] { background-color: blue; }

Código HTML de las cajas:

<div id="cont1">
<div id="capaA1"></div>
<div id="capaA2"></div>
<div id="capaA3"></div>
<div id="capaA4"></div>
</div>
<div id="cont2">
<div id="espacioA1"></div>
<div id="espacioA2"></div>
<div id="espacioA3"></div>
<div id="espacioA4"></div>
</div>