Explore 100's Of Free Video Tutorials

Keep Learning, Keep Coding & Keep Sharing

CSS

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: