CSS :not selector test

A simple test of how to hide and show elements using the classes, especially the new :not() pseudo-selector in CSS3. NB: doesn't work in IE8 or earlier unless you add a shiv such as selectivizr

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>CSS :not() selector test</title>
        <meta name="description" content="" />
        <meta name="author" content="Michael Brown" />
        <meta name="viewport" content="initial-scale=1.0" />
    </head>

    <body>
        <div>
            <header>
                <h1>CSS :not() selector test</h1>
            </header>
<br><br>

            <div id="divContainer" class="container">
                <button class="ui teal labeled icon button" name="projectButton" onclick="javascript: return false;">Project</button>
                <button class="ui teal labeled icon button" name="projectButton1" onclick="javascript: return false;">Project</button>
                 <button class="ui teal labeled icon button" name="projectButton2" onclick="javascript: return false;">Project</button>
                <textarea id="taEditBox" class="editModeDisplay"></textarea>
                <span id="spanViewBox" class="viewModeDisplay"></span>
                <br />
                <button id="butEdit" class="viewModeDisplay">
                    Edit mode
                </button>
                <button id="butView" class="editModeDisplay">
                    View mode
                </button>
                <button class="editModeDisplay dummyButton">
                    Format 1
                </button>
                <button class="editModeDisplay dummyButton">
                    Format 2
                </button>
            </div>

        </div>
    </body>
</html>

CSS

body {
    margin :20px;
}

/* Inside an element that has the container and editMode classes, we  want to hide any element that has the viewModeDisplay class */
.container.editMode .viewModeDisplay {
    display: none;
}

/* Inside an element that has the container class but *not* the
 editMode class, we want to hide any element that has the
 editModeDisplay class */
.container:not(.editMode) .editModeDisplay {
    display: none;
}
.ui.button:not([name="projectButton"]):not([name="projectButton1"]) 
{
  background-color:red;
  }
}

JavaScript

// Load the application button code once the DOM is ready, using `jQuery.ready`
$(function() {

            $("#butEdit").click(function() {
                        $("#divContainer").addClass("editMode");
                    });

            $("#butView").click(function() {
                        $("#spanViewBox").html($("#taEditBox").val());
                        $("#divContainer").removeClass("editMode");
                    });

            $(".dummyButton").click(function() {
                        alert("this button is just here for show!")
                    });
        });