0

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

0 Answers0