フォーカス時のエフェクト変更 CSS

Question

前提

pythonとHTML、CSS、flaskを使用しています。
初学者です。

CSSについて、3つ質問です。
全部でなくても良いのでよろしくお願いいたします。

①セレクトボックス選択時、アウトラインが青色になるのを変えたいです。
inputの場合以下のコードで行えるのと同じことをセレクトボックスに対してしたいです。
一番上をselect: focusに変更するのではだめでした。

input[type="text"]: focus
{
outline: none;
border: 2px solid #8D8DAA;
}

②上記コードをtype="number"、"date"に対しても適用したいです。
[]の中を書き換えて複数書けばうまく行くのですが、一つにまとめる方法はありますか。

③リンクのフォーカス時の色を変更したく、以下のコードを書きました。
navbarのbrandは変わったのですが、item(link)はデフォルトの青のまま変わりません。なぜでしょうか。

a:hover{color: #F56D91;}

<nav class="navbar border navbar-expand-md">
            <div class="container-fluid">
                <a class="navbar-brand" href="/">ToDoリスト</span></a>
                <div class="collapse navbar-collapse" id="navbar">
                    {% if session["user_id"] %}
                        <ul class="navbar-nav me-auto mt-2">
                            <li class="nav-item"><a class="nav-link" href="/add">追加</a></li>
                            <li class="nav-item"><a class="nav-link" href="/delete">削除</a></li>
                            <li class="nav-item"><a class="nav-link" href="/update">更新</a></li>
                        </ul>
                        <ul class="navbar-nav ms-auto mt-2">
                            <li class="nav-item"><a class="nav-link" href="/logout">ログアウト</a></li>
                        </ul>
                    {% else %}
                        <ul class="navbar-nav ms-auto mt-2">
                            <li class="nav-item"><a class="nav-link" href="/register">新規登録</a></li>
                            <li class="nav-item"><a class="nav-link" href="/login">ログイン</a></li>
                        </ul>
                    {% endif %}
                </div>
            </div>
        </nav>

以下のようにすればうまくいきました。

.navbar-brand:hover{color: #F56D91;}
.nav-link:hover{color: #F56D91;}

Comments

[int32_t]

3つの疑問があるなら、3つの質問エントリーに分けてくれたほうが回答しやすいです。

[退会済みユーザー]

申し訳ありませんでした。次回以降気をつけます。

Answer 1

①②に関して

input[type="text"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus
{
  outline: none;
  border: 2px solid #8D8DAA;
}

うまく行かなかったのは、select: focus と間に半角スペースがあるからだと思います。

text, date, number限定ではなく、すべてのinput要素に適用していいのなら、

inpu:focus,
select:focus
{
  outline: none;
  border: 2px solid #8D8DAA;
}

Comments

[退会済みユーザー]

その通り、半角スペースのせいでした。
複数に適用させる際、カンマで区切るとうまくいかないと思っていたのですが、それもカンマの後にスペースを入れていたせいでした。
ありがとうございます。

Answer 2

①について

selectに変えました。

select:focus {
  outline: none;
  border: 2px solid #8D8DAA;
}

②について

難しそうです。ひとつひとつ指定するしかないかと。

③について

質問者様が書いておられるように
nav-linkクラスのセレクターで設定するのが一番良さそうです。
また、nav-linkおよびnavbar-brandを同時指定することもできます。

.navbar-brand:hover,.nav-link:hover{
  color: #F56D91;
}

Comments

[退会済みユーザー]

①コピペさせていただいたらうまくいきました。スペースが入っていたことが原因だったようです。
②ありがとうございます。
③質問文にHTMLとうまくいった方法を追加しました。

[退会済みユーザー]

ありがとうございます

[退会済みユーザー]

③を追記しておきました