The following HTML-markup

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

and css stylesheet

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

are given. But I want to effect like of applying both hover and focus pseudo-element. I think that copy-paste of code like this:

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

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

isnt a best way, because it's very upsize code. Is there exist to do it without JS applying?

The following HTML markup

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

and CSS stylesheet

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

are given. But I want the effect of applying both hover and focus pseudo-classes. I think that copy-paste of code like this:

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

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

isn’t a best way, because it's very upsize code. Is there a way to do it without applying JS?