JavaScript　赤字について。

[javscript ]ナビゲーション画面(https://www.w3schools.com/howto/howto_js_topnav_responsive.asp)

bracketsとchromeを使っています。
bracketsで下のコードを書くと、問題なく動くのですが、
.topnav a.icon{
float: right;
display: block;
}
という部分が赤字になります。
もし理由がわかったら教えてください。

html
1コード
2<html>
3<head>
4    <meta name="viewport" content="width=device-width,initial-scale=1">
5    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
6    <style>
7    body{
8        margin: 0;
9    font-family: Arial,Helvetia,sans-serif;
10        }
11    .topnav{
12        overflow: hidden;
13    background-color: #333;
14        }
15    .topnav a{
16        float: left;
17    display: block;
18    color: #f2f2f2;
19    text-align: center;
20    padding: 14px 16px;
21    text-decoration: none;
22    font-size: :17px;
23        }
24    .topnav a:hover{
25        background-color:#ddd;
26    color: black;
27        }
28        .topnav a.active{
29            background-color: #4CAF50;
30            color: white;
31        }
32    .topnav .icon{
33        display: none;
34        }
35    @media screen and (max-width:600px){
36        .topnav a:not(:first-child){display: none;)
37     .topnav a.icon{
38        float: right;
39        display: block;
40            }
41        }
42        @media screen and (max-width:600px){
43            .topnav.responsive{position: relative;}
44            .topnav.responsive .icon{
45                position: absolute;
46                right: 0;
47                top:0;
48            }
49            .topnav.responsive a{
50                float:  none;
51                display:  block;
52                text-align: left;
53            }
54        }
55    </style>
56    </head>
57    <body>
58    <div class="topnav" id="myTopnav">
59        <a href="#home" class="active">Home</a>
60        <a href="#news" >News</a>
61        <a href="#contact">Contact</a>
62        <a href="#about">About</a>
63        <a href="javascript:void(0);" class="icon" onclick="myFunction()"></a>
64           </div>
65        <div style="padding-left: 16px">
66        <h2>Responsive Topnav Example</h2>
67        <p>resize the browser window to see how it works.</p>
68        </div>
69        <script>
70        function myFunction(){
71            var x=document.getElementById("myTopnav");
72        if(x.className ==="topnav"){
73            x.className +="responsive";
74        }else{
75            x.className ="topnav";
76        }
77        }</script>
78    </body>
79    </html>

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

前の行の

  .topnav a:not(:first-child){display: none;)

の末尾の)が間違っているせいかと思います。}に直してください。

投稿2020/03/03 15:01

hwatarig

総合スコア461

IinoHiroki1031

2020/03/04 00:13

ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！