CSS Pseudo-classes

What is Pseudo-class
The CSS pseudo-classes allow you to style the dynamic states of an element
such as hover, active and focus state, as well as elements that are existing in
the document tree but can't be targeted via the use of other selectors without
adding any IDs or classes to them, for example, targeting the first or last child
elements.

A pseudo-class starts with a colon (:).

syntax :
selector:pseudo-class { property: value; }

list of pseudo classes

:visited

:link

:active

:hover

:checked
<style>

input[type="checkbox"]:checked{
box-shadow: 5px 5px 3px red;
}
</style>

<input type="checkbox" name="" id="">

:default
<style>
input:default{
box-shadow: 5px 5px 3px red;
 }
</style>

<form action="">
Male
<input type="radio" name="gender" id="" checked>
Female
<input type="radio" name="gender" id="">
</form>

:disabled and :enabled

<style>
input {
padding: 2px 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
input[type=text]:enabled {
background: #eee;
}
input[type=text]:disabled {
background: #009988;
}
</style>

<form action="">
<label for="name">First name:</label>
<input type="text" value="John" id="name">
<br>
<label for="lastname">Last name:</label>
<input type="text" value="Smith" id="lastname">
<br>
<label for="country">Country:</label>
<input type="text" disabled="disabled" value="10 High Street"
id="conutry">
</form>

:empty
<style>
div:empty{
width: 40%;
height: 5vh;
 background-color: red;
}
</style>

<div>monday</div>
<div></div>

:first-child
<style>
p:first-child{
width: 40%;
height: 5vh;
background-color: red;
}
</style>

<p>Lorem ipsum is simply dummy text...</p>

<h2>First-child selector example</h2>
<p>Lorem Ipsum is simply dummy text...</p>

:last-child
<style>
li:last-child {
width: 30%;
background-color: #1c87c9;
color: #ffffff;
}
</style>

<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>

:focus
<style>
input:focus {
background-color: #ccc;
}
</style>
<form>
Name:
<input type="text" name="name"> Surname:
<input type="text" name="surname">
</form>

:fullscreen

<style>
.example:fullscreen {
background-color: #112233;
width: 100vw;
height: 100vh;
}
</style>

<div class="container">
<div class="example" id="example">
</div>
<button onclick="var el=document.getElementById('example');
el.webkitRequestFullscreen();">Click here</button>
</div>

:in-range
<style>
input:in-range {
border: 2px solid red;
}
</style>

<form>
<input type="number" min="1" max="10" value="3">
</form>

:invalid
<style>

input:invalid {
border: 2px solid red;
}
</style>

<form>
 <input type="email" >
</form>

:lang()
<style>
p:lang(en){
color: green;
}
</style>

<p lang="en">Lorem ipsum dolor sit.</p>

:not()
<style>
p{
color: #ccc;
}
:not(p){
color: green;
}
</style>

<h1>Lorem ipsum dolor sit amet.</h1>

<p>Lorem ipsum dolor sit.</p>
<h1>Lorem ipsum dolor sit amet.</h1>
<span>Lorem, ipsum dolor.</span>
<a href="">https://www.codebro.co.in</a>

:nth-child()

The :nth-child() pseudo-class selects and adds styles to elements based

on their index.

The :nth-child() can be specified by a number, a keyword, or a formula.

Keyword values
odd
Represents those elements whose numeric position is odd (e.g 1, 3, 5, 7
etc.).

even
Represents those elements whose numeric position is even (e.g 2, 4, 6, 8
etc.).

<style>
p:nth-child(even){ /* value inside nth-child odd even or numeric value
like 1 2 3 so on...*/
background-color: red;
}
</style>

<p>Lorem ipsum dolor sit amet.</p>

<p>Lorem ipsum dolor sit.</p>
<p>Lorem ipsum dolor sit.</p>

:optional
<style>
input:optional:hover{
background-color: #ccc;
}
</style>
<form action="">
username:
<input type="text" name="" id="" required>
Email:
<input type="email" name="" id="">
password:
<input type="password" name="" id="" required>
</form>

:out-of-range
<style>

input:out-of-range {
border: 3px solid #8ebf42;
}
</style>

<form>
<input type="number" min="1" max="12" value="15">
</form>

:read-only
<style>

input:read-only{
border: none;
padding: 5px;
background-color: #f5f5f5;
}
</style>

<form>
<input type="email" value="abc@gmail.com" readonly>
</form>

:read-write

<style>
#read-write:read-write{
border: none;
padding: 5px;
background-color: #f5f5f5;
}
</style>

<form>
<input type="email" value="abc@gmail.com" readonly>
<input type="email" value="abc@gmail.com" id="read-write" >
</form>
 :required
<style>

input:required{
border: none;
padding: 5px;
background-color: #f5f5f5;
}
</style>

<form>
<input type="email" value="abc@gmail.com" required>
<input type="email" value="abc@gmail.com" >
</form>

:root
<style>
:root{
background-color: #112233;
padding: 2em;
}
body{
background-color: #ccc;
padding: 1.5em;
}
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Debitis maiores autem itaque reiciendis nisi, corporis iste
nostrum saepe voluptate distinctio?</p>

:target

<style>
:target{
border: 3px dotted skyblue;
padding: 0.3em;
}
</style>

<a href="#main">Hit-1</a>
<a href="#main-01">Hit-2</a>

<div id="main">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde,
quaerat.</p>
</div>
<div id="main-01">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde,
quaerat.</p>
</div>

:valid

<style>

input {
border: 1px solid #cccccc;
padding: 5px 10px;
}
input:valid {
background-color: #112233;
}
</style>

<form>
<input type="email" value="oc@sexampl.com">
</form>

What is Pseudo-element
The CSS pseudo-elements allow you to style the elements or parts of the
elements without adding any IDs or classes to them. It will be really helpful in
the situations when you just want to style the first letter of a paragraph to
create the drop cap effect or you want to insert some content before or after
an element, etc. only through style sheet.

CSS3 introduced a new double-colon (::) syntax for pseudo-elements to

distinguish between them and pseudo-classes.
selector::pseudo-element { property: value; }
list of pseudo Elements

::after

::before
::selection

::placeholder

::first-letter

::first-line

CSS3 3D Transforms

The translate3d() Function

Moves the element from its current position to a new position along the X, Y
and Z-axis. This can be written as translate(tx, ty, tz).

.container {

width: 125px;

height: 125px;

perspective: 500px;

border: 4px solid #e5a043;

background: #fff2dd;

.transformed {

-webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */

transform: translate3d(25px, 25px, 50px); /* Standard syntax */

The rotate3d() Function

The rotate3d() function rotates the element in 3D space by the specified angle
around the [x,y,z] direction vector. This can be written as rotate(vx, vy, vz,
angle).
.container{

width: 125px;

height: 125px;

perspective: 300px;

border: 4px solid #a2b058;

background: #f0f5d8;

.transformed {

-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */

transform: rotate3d(0, 1, 0, 60deg); /* Standard syntax */

The scale3d() Function

The scale3d() function changes the size of an element. It can be written
as scale(sx, sy, sz). The effect of this function is not evident unless you use it
in combination with other transform functions such as rotate and the
perspective,

.container{

width: 125px;

height: 125px;

perspective: 300px;

border: 4px solid #6486ab;

background: #e9eef3;

.transformed {

-webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */

transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Standard syntax */