• Problems

    This line enable URL Rewriting . It must be enabled via the RewriteEngine directive! and if your .htaccess file is going to use rewrite rules, you should always include this line. Otherwise, you can’t be sure if its enabled or not. The string “on” is case insensitive.

  • 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
css pseudo class element

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:nth-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 .

nth -child :
It style nth 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:nth-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

1 comment: