Learn How to use css pseudo tag - Master css pseudo in 2 step part-1

• What you will learn :
• Description of pseudo tag
• Remove confussion related to use of : and ::
• Style element on the basis of Document Structure
• Style element on the basis of position
• Style element on the basis of position and type
• Style element on the basis of target text group based on state or location

---

Introduction:

Pseudo it self refer to fake which means does not exist. It will be more clear in :before and :after section . There are basically two type of pseudo tag

• Pseudo-class
• Pseudo-Element

We will go furthur deep in these topic below .

1] Pseudo-class

syntax: Tag:pseudo-class

Example: div:first-child

Notice!: Pseudo class use ':' single but pseudo Element use two'::'

1

Pseudo class is divided into four type based on the position of tag :

• Tag:first-child
• Tag:last-child
• Tag:n^th-child

first-child:

It matches a specified element that is the first child of another element.

Example: Div:first-child
Notice!: Many people are confused that the above but it is mistake , it rather search div that is first child of another Element. Example:

<p>
<div> first child
<div> div inside first child
</div>
<div>
</p>
 style:
div:first-child{color:red;} 

last-child:

It matches specified element that is last child of another element .

n^th -child :

It style n^th element inside another element .You can also specify odd or even element

---

2

Pseudo class is divided into four type based on the position and type of tag :

• Tag:first-of-type
• Tag:last-of-type
• Tag:n^th-child-of-type

Main different between 1)position and 2)position and type is illustrated below:

        
<div>
first child first type
<br />
<div>
child of first child</div>
</div>
<div>
first child </div>
style:
     div:first-child{color:red}
     div:first-of-type{ font-size:25px;}

3

Pseudo class is divided into four type based on the Document structure :

• Tag:empty
• Tag:not(selector)

4

Pseudo class is divided into four type based on state of element :

a)Links

• visited
• focus
• hover
• active

a)forms

• enabled
• disabled
• checked

Example:

<a href="https://www.blogger.com/blogger.g?blogID=3692262285405580599#"> please hover </a>
style:
a:hover{
color:red;
}

Continue to read Second part of this article Read Part Two