Pseudo-class in selector

Question

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?

You mean like.. input[type="text"]:hover, input[type="text"]:focus {} ? — Josh Crozier
– Josh Crozier, Commented Dec 22, 2013 at 23:58
:focus and :hover are pseudo-classes, not pseudo-elements (I edited it in your question). — unor
– unor, Commented Dec 23, 2013 at 5:18

Theraot · Accepted Answer · 2013-12-22 23:58:36Z

2

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;
}

answered Dec 22, 2013 at 23:58

Theraot

41.2k7 gold badges70 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pseudo-class in selector

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related