i have this code as html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>What webbing will you buy next ?</title>
<script src="main.js"></script>
<link rel="stylesheet" href="main.css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<h1>WHAT WEBBING WILL I BUY NEXT ?</h1>
<div class="container">
<div class="row">
<div class="col s12">
<a class="waves-effect waves-light btn-large">Button</a>
</div>
</div>
<div class="row">
<div class="col s2 webbing polyamid">
Polyamid
</div>
<div class="col s2 webbing polyester">
Polyester
</div>
<div class="col s2 webbing nylon">
Nylon
</div>
<div class="col s2 webbing tubular">
Tubular
</div>
<div class="col s2 webbing heavy">
Heavy
</div>
<div class="col s2 webbing light">
Light
</div>
</div>
</div>
</body>
</html>
i'am trying to select every div inside my row that has not not a certain class ( polyester for the example ), but can't figure out how.
i tried this :
var nopoly = document.querySelectorAll(".webbing:not(.polyester)");
console.log(nopoly);
but the console just show a nodelist that length is equal to 0, can't understand why.
pure javascript only, anyone could help me ? thanks :)