Search code examples
htmlcsspseudo-class

Effect of pseudo classes on child- and parent-elements

I have a <input> inside a <div>. Now if I use the pseudo-class :hover both of the elements gets the pseudo-class.

But If i use :focus only the <input> gets that pseudo-class. I have read that only certain elements can have the :focus pseudo-class and <div> is not one of them.

Now I wonder if there is some other pseudo-class I can use that exist on both tags with similar behavior as :focus, but will appear on both tags like :hover does.

UPDATE: plunker illustrating the problem.

Solution

  • I don't think you can do what you want with just CSSyou may need a bit of jquery like:

    $(document)
.on("focus", "input", function(){

///here what you want, in this example add a class to your div
$('div').addClass("divfocus");

})

    JSFIDDLE