CSS UI pseudoclasses - Part 3
Notes:
CSS - Pseudo Class Selectors (UI) - Part 3
4.
selector : focus
{
declaration list;
}
It selects any html element targeted by the selector, if its status is focused
Ex:
input : focus
{
color : white;
background-color : red;
}
It selects any input element, if its status is focused
5.
selector : optional
{
declaration list;
}
It selects any html element targeted by the selector, if its status is optional
Ex:
input : optional
{
color : white;
background-color : red;
}
It selects any input element, if its status is optional
6.
selector : required
{
declaration list;
}
It selects any html element targeted by the selector, if its status is required
Ex:
input : required
{
color : white;
background-color : red;
}
It selects any input element, if its status is required
Example Code: display * beside required controls
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Attribute selectors demo</title>
<style type="text/css">
input:optional + span
{
color:red;
visibility:hidden;
}
input:required + span
{
color:red;
visibility:visible;
}
</style>
</head>
<body>
<form>
User Name: <input type="text" required/>
<span>*</span>
<br/>
Password: <input type="password"/>
<span>*</span>
<br/>
<input type="submit"/>
</form>
</body>
</html>
Interview Questions:
