css pseudo-classes

css pseudo-classes are used to add special effects to some selectors.a pseudo-class starts with a colon(:).

a pseudo-class names not case-sensitive.

no whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.

the syntax of pseudo-classes:

                  selector:pseudo-class {property:value; }

the css classes can also be used with pseudo-classes.

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

anchor pseudo-classes

      <style  type="text/css" }
        
            a:link {color:#ff00005 ; }
        
            a:visited {color:#00FF05 ; }
        
            a:hover {color:#ff000aa ; }
        
            a:active {color:#00000dd ; }
        
        </style>
  • a:hover must come after a:link and a:visited in the cssdefinition in order to be effective.
  • a:active must come after a:hover in the css definition in order to be effective.

pseudo-class :first-child

the first-child pseudo-class represents an element that is the first child of some other element. same as :nth-chile(1).

the pseudo-class :first-child syntax :-

               selector:first-child{property:value; }
        <html>  <head>
        
        <style  type="text/css" >
        
           div > p:first-child { color:red;
           
     border:10px outset  #3a4b9c; color:#ffffff; background-color:#3a4b9c; }
           
        </style>  </head>
        
      <body>
      
         <p>this is paragraph inside the body element.</p>
         
       <div>
       
          <p>this is first p inside the div element.</p>
          
          <p> this is second p inside the div element.</p>
          
   </div>
   
  </body> 
  
</html>

Css pseudo-Class :last-child

the :last-child pseudo-class represents an element that is the last child of some other element.

same as:nth-last-child(1).

    <html> <head>
    
     <style  type="text/css">
     
         ol > li:last-child{ color:lime;
         
      border:10px outset #eeeeee;
      
      background-color:#3a4b9c;
      
      padding: 10px 10px;
      
       }
         
   </style> </head>
   
        <body>
         
          <ol>
          
              <li>first list item </li>
              
              <li>second list item </li>
              
        	  <li>last list item </li>
        	  
    </ol>
    
 </body></html>

Css pseudo-class :lang

the :lang pseudo-class allows you to define special rules for different languages.

the syntax :- :lang(c)   {properties}

note:-"c" must be a valid css identifier and must not be empty.

        <html>  <head>
         
         <style  type="text/css">
         
        :lang(en) { color:red ; font-style:italic; }
        
        </style> </head>
        
     <body>
     
        <p>this is <q lang="en"> paragraph inside the </q>  body element.</p>
        
  </body> </html>

all css pseudo classes

selectordescription
:linkuse this class to add special style to an unvisited link.
:visiteduse this class to add special style to a visited link.
:activeuse this class to add special style to an active link.
:focus use this class to add special style to an element while the element has focus.
:first-childuse this class to add special style to an element that is the first child of some other element.
:last-child use this class to add special style to an element that is the last child of some other element.
:languse this class to specify a language to use in a specified element.