Псевдокласс в селекторе

Question

Следующая разметка HTML

<div id="child">
    <input type="text"/>
</div>

и таблица стилей CSS

input[type="text"]:focus{
    border: 1px solid green;
}
#child {
    border: 10px solid grey;
    border: 20px black solid;
    background: aqua;
    height: 50px;
    margin: 10px;
}

дано. Но я хочу эффект применения обоих hover а также focus псевдо-классы. Я думаю, что копирование кода, например, так:

input[type="text"]:focus{
    border: 1px solid green;
}

input[type="text"]:hover{
    border: 1px solid green;
}

это не лучший способ, потому что это очень большой код. Есть ли способ сделать это без применения JS?

Answer 1

Что-то, что помогает уменьшить ваш код за счет наличия единого блока стилей для нескольких селекторов:

input[type="text"]:focus, input[type="text"]:hover
{
    border: 1px solid green;
}