Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

focus

The focus pseudo class selector will target the element that has focus in the document as the user interacts with various things.
Syntax Logicelement:focus { property_list }

CSS Code Example

<style> input:focus { background:#C4E1FF; } </style> <input name="email"> <input name="password"> <style> #email_status { display: none; } #email:focus ~ #email_status { display: inline; } </style> <input id="email" name="email" placeholder="Email Address"> <span id="email_status">Do not enter fake email address</span>

CSS

Selectors

universaltypecompoundclassidnotattributedescendantchildadjacent siblinggeneral siblingfirst childlast childonly childfirst of typelast of typeonly of typenth childnth last childnth of typenth last of typeemptyrootfirst linefirst letterbeforeafterlinkvisitedhoveractivefocustargetenableddisabledcheckedlang