Search code examples
csscss-selectorspseudo-class

Pseudo-class in selector

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?

Solution

  • Something that helps to reduce your code by having a single style block for multiple selectos, in your case:

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