There is a very odd behavior with the "not()" css selector that I am experiencing.
Here is my simplified code snippet:
<div id="mapDiv" class="mapDiv mapDiv1">
pippo
<div class="gm-style">pluto</div>
</div>
<div id="mapDiv2" class="mapDiv mapDiv2">
pippo
<div class="gm-style">pluto</div>
</div>
And here is my CSS code:
.mapDiv1, .mapDiv2 {
width: 300px;
height: 100px;
border: solid 1px red;
}
.mapDiv div {
width: 200px;
height: 50px;
border: solid 1px blue;
}
:not(.mapDiv1) div {
color: green;
}
You can also find a jsFiddle here.
I expected the text in the second box to be styled with green color due to the not() selector, however, it is being applied to both boxes. Can someone please explain why?