CSS Pseudo Classes

Next ❯Pseudo Elements

Used to style a special state of an element

  • It always start with single colon notation(:) like ":pseudo-class"

Syntax

selector:pseudo-class {
  /*css properties*/
}
  • Default value of selector is * , so default syntax is :
    *:pseudo-class {
  /*css properties*/
}
  • turned_in_notPseudo Classes
    • labelLink Based
      • :link
      • :active
      • :visited
      •  
    • labelInput Based
      • :focus
      • :checked
      • :enabled
      • :disabled
      • :valid
      • :invalid
      • :required
      • :optional
      • :in-range
      • :out-of-range
      • :read-only
      • :read-write
    • labelOthers
      • :target
      • :hover
      • :root
      • :empty
      • :lang(language)
      • :not(selector)
      • :first-child
      • :first-of-type
      • :last-child
      • :last-of-type
      • :only-child
      • :only-of-type
      • :nth-child(n)
      • :nth-of-type(n)
      • :nth-last-child(n)
      • :nth-last-of-type(n)

Link Based

Used to style the Link element "<a>"

Pseudo-classesDescription
:linkSelects all unvisited links
:visitedSelects all visited links
:activeSelects the active element (when user click on an element)
  • :active can be used in all other html elements
LINK
At beginning it is unvisited (:link) and Once you click-in the link, it is active (:active). Finally, you click-out the link,it is visited(:visited)
a:link{color:lightgreen;}
a:visited{color:green;}
a:active{color:red;background-color: yellow;}

Input Based

Used to style the Input element "<input>"

Pseudo-classesDescription
:focusSelects input element that has focus
:checkedSelects all checked input element (for radio buttons and check-boxes)
:enabledSelects all enabled element
:disabledSelects all disabled element (having "disabled" attribute)
:validSelects all input element having valid value
:invalidSelects all input element having invalid value
:requiredSelects all input element which are required (having "required" attribute)
:optionalSelects all input element which are not required
:in-rangeSelects all input element having value within a specified range
:out-of-rangeSelects all input element having value outside a specified range
:read-onlySelects all input element which are read-only (having "readonly" attribute)
:read-writeSelects all input element which are not read-only

When user try to input some value, its background color changed to lightgreen

input:focus{
  background-color:lightgreen;
}
:focussubject
:focusclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
input:focus{
  background-color:lightgreen;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter anything..!">
</body>
</html>

Love:Games  Books

Like:  AppleMango

When user selects the values,the width of it becomes 50px

input:checked{
  width: 50px;
}
:checkedsubject
:checkedclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
input:checked{
  width: 50px;
}
</style>
</head>
<body>
Love:<input type="checkbox" id="abc">Games
<input type="checkbox" id="bcd">Books<br/>
Like:<input name="group1" type="radio" id="test1">Apple
<input name="group1" type="radio" id="test2">Mango
</body>
</html>

All disabled elements have red border

All enabled elements have teal border

button:disabled,input:disabled{
  border:2px solid red;
}
button:enabled,input:enabled{
  border:2px solid teal;
}
:disabled, :enabledsubject
:disabled, :enabledclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
button:disabled,input:disabled{
  border:2px solid red;
}
button:enabled,input:enabled{
  border:2px solid teal;
}
</style>
</head>
<body>
<input type="text" placeholder="disabled input-field!" disabled="disabled">
<button disabled="disabled">I am disabled</button><br/>
<input type="text" placeholder="Enabled input-field!">
<button>I am enabled</button>
</body>
</html>

Entered number other than 1 to 9 makes element invalid above, else valid

input:valid{
  border:2px solid teal;
}
input:invalid{
  border:2px solid red;
}
:valid, :invalidsubject
:valid, :invalidclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
input:invalid{
  border:2px solid red;
}
input:valid{
  border:2px solid teal;
}
</style>
</head>
<body>
<input type="number" placeholder="Enter no from 1 to 9" min="1" max="9">
</body>
</html>

All Required elements have pink background

All Optional elements have lightgreen background

input:required{
  background:pink;
}
input:optional{
  background:lightgreen;
}
:required, :optionalsubject
:required, :optionalclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
input:required{
  background:pink;
}
input:optional{
  background:lightgreen;
}
</style>
</head>
<body>
<input type="text" placeholder="Required Field" style={{textAlign: "center"}} required="required">
<input type="text" placeholder="Not Required Field" style={{textAlign: "center"}}>
</body>
</html>

Entered number other than 1 to 9 makes element in-range above, else out-of-range

input:in-range{
  border:2px solid teal;
}
input:out-of-range{
  border:2px solid red;
}
:in-range, :out-of-rangesubject
:in-range, :out-rangeclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
input:in-range{
  border:2px solid teal;
}
input:out-of-range{
  border:2px solid red;
}
</style>
</head>
<body>
<input type="number" placeholder="Enter no from 1 to 9" min="1" max="9">
</body>
</html>

Read-only input element background color becomes pink

Not read-only input element background color becomes lightgreen

input:read-only{background:pink;}
/* For Firefox */
input:-moz-read-only{background: pink;}
input:read-write{background:lightgreen;}
/* For Firefox */
input:-moz-read-write{background: lightgreen;}
:read-only, :read-writesubject
:read-only, :read-writeclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
input:read-only{background:pink;}
/* For Firefox */
input:-moz-read-only{background: pink;}
input:read-write{background:lightgreen;}
/* For Firefox */
input:-moz-read-write{background: lightgreen;}
</style>
</head>
<body>
<input type="text" placeholder="You can only read it..!" readonly="readonly">
<input type="text" placeholder="You can modify it..!">
</body>
</html>

Others
Pseudo-classesDescription
:targetSelects the current active target element
:hoverSelects the element when user mouse over them
target1target2
Target 1
Target 2

Click above target link to display the current active target element (#target_id_name)

div:target{
  display:block;
}
:targetsubject
:targetclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
div{
  width:200px;
  height:200px;
  display:none;
}
div:target{
  display:block;
}
</style>
</head>
<body>
  <div id="t1" style="background:teal">
    <h5>Target 1</h5>
  </div>
  <div id="t2" style="background:lightgreen;">
    <h5>Target 2</h5>
  </div>
  <a href="#t1">target1</a>
  <a href="#t2">target2</a>
</body>
</html>
Mouse over on me to change Background

Mouse over the box to see the effect

div:hover{
  background:teal;
}
:hoversubject
:hoverclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
div{
  height:200px;
  width:200px;
}
div:hover{
  background:teal
}
</style>
</head>
<body>
  <div>
    Mouse over on me to change Background
  </div>
</body>
</html>


Pseudo-classesDescription
:rootSelects the document's root element
:emptySelects all selector element that has no children & no text
:lang(language)Selects all selector element with a "lang" attribute with specified value
:not(sp_selector)Selects all selector element which is not having specific-selector

* sp_selector means specific-selector above

<html>
<body>

<p className="abc"></p>

<p lang="en">English language..!</p>

<p className="abc">Child of body</p>

<p>Child of body</p>

</body>
</html>

Try below options to see comment

:root {background-color:skyblue;}
p:empty{border:2px solid red;height:25px;}
p:lang(en) {color:blue;}
p:not(.abc) {color:red;}


Pseudo-classesDescription
:first-childSelects all selector element that are the first child of its parent
:first-of-typeSelects all selector element that are the first selector element of its parent
:last-childSelects all selector element that are the last child of its parent
:last-of-typeSelects all selector element that are the last selector element of its parent
:only-childSelects all selector element that are the only child of its parent
:only-of-typeSelects all selector element that are the only child as selector element of its parent
<body
<div

<p First child of div</p

<p><b>only child of <p></b></p

<pLast child of div</p

</div

<pFirst child of body as <p> </p

<pChild of body</p

<pLast child of body as <p></p

<b>only child as <b> of body</b

</body

Try below options to see comment

p:first-child {color:red;}
p:first-of-type {color:red;}
p:last-child {color:red;}
p:last-of-type {color:red;}
b:only-child {color:red;}
b:only-of-type {color:red;}


Pseudo-classesDescription
:nth-child(n)Selects all selector element that are the nth child of its parent
:nth-of-type(n)Selects all selector element that are the nth selector element of its parent
:nth-last-child(n)Selects all selector element that are the nth child of its parent from last
:nth-last-of-type(n)Selects all selector element that are the nth selector element of its parent from last
  • 'n' can be any positive number
  • you can also use a formula: (an+b) in any nth- selectors (above 4)
    where a, b can be any positive number,
    and in this case 'n' act as a variable starts from 0, 1, 2, ..., n
/*Example*/
(2n+1) selects 1,3,5,7,....
(2n+2) selects 2,4,6,8,....
(3n+1) selects 1,4,7,10,....

<body>
<div>

<p> 1st child of div as <p></p>

<p>2nd child of div as <p></p>

<p>3rd child of div as <p></p>

</div>

<p>1st child of body as <p></p>

<p>2nd child of body as <p></p>

<p>3rd child of body as <p></p>

</body>

Try below options to see comment

p:nth-child(odd) {color:red;}
p:nth-child(even) {color:red;}
p:nth-child(1) {color:red;}
p:nth-of-type(1) {color:red;}
p:nth-last-child(2) {color:red;}
p:nth-last-of-type(2) {color:teal;}
p:nth-child(2n+1){color:blue;}
p:nth-of-type(2n+1){color:blue;}

  • Pseudo Elements
❮ Prev Combinators
Next ❯Pseudo Elements
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯