ul, liの１番目のli(img)だけhoverを外したい。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <header>
11    <div class="container">
12      <ul>
13        <li><a href="#"><img src="white-whale.svg" alt=""></a></li>
14        <li><a href="#">Home</a></li>
15        <li><a href="#">About</a></li>
16        <li><a href="#">Work</a></li>
17        <li><a href="#">Contact</a></li>
18      </ul>
19        <div class="header-text">
20          <h1>myCoder</h1>
21          <p>I am a Frond End Developer</p>
22        </div>
23    </div>
24  </header>
25</body>
26</html>
27

CSS
1* {
2  margin: 0;
3  padding: 0;
4  letter-spacing: 1px;
5}
6.container {
7  margin: auto;
8  width: 80%;
9}
10a {
11  text-decoration: none;
12  color: #fff;
13}
14header img {
15  width: 80px;
16}
17header ul {
18  list-style: none;
19  display: flex;
20  justify-content: flex-end;
21  align-items: center;
22  flex-wrap: wrap;
23  text-transform: uppercase;
24  position: fixed;
25  width: 80%;
26}
27header li {
28  padding: 20px;
29}
30header a:hover {
31  border-bottom: 2px solid #fff;
32}
33header li:first-child {
34  margin-right: auto;
35}

kei344

2019/06/02 15:34

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

icoder

2019/06/02 16:58

わかりました、ありがとうございます。

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

回答2件

ベストアンサー

単純に打ち消してしまえばよいです。

CSS
1header li:first-child a:hover {
2  border-bottom: 0 none;
3}
4```**動くサンプル：**[https://jsfiddle.net/cdtg6r7w/](https://jsfiddle.net/cdtg6r7w/)

投稿2019/06/02 17:31

kei344

総合スコア69430

icoder

2019/06/02 18:15

無事解決しました。ありがとうございました。

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

:not()擬似クラスを使ったらいけるかもしれないです！
https://developer.mozilla.org/ja/docs/Web/CSS/:not
http://weboook.blog22.fc2.com/blog-entry-382.html

css
1ul li:hover :not(:first-child){
2hover用のcss
3}

投稿2019/06/02 15:52

fumito_94

総合スコア679

icoder

2019/06/02 17:07

header ul li a:hover :not(:first-child) { border-bottom: none; } を使ってみましたが変化なしでした。ありがとうございました。

fumito_94

2019/06/03 02:52

そうでしたか… お役に立てず申し訳ないです。でも打ち消しで解決できたとのことだったのでよかったです！

icoder

2019/06/03 03:24

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

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.47%

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

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

質問する

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

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

ul, liの１番目のli(img)だけhoverを外したい。

関連した質問