CSS Pseudo elements and Pseudo classes

        

          

          
          

          
Session on Pseudoclasses

          

            

                
            

        

        
Session on Pseudoelements

          

              

                  
              

          



  


  
What are Pseudoclasses in CSS?


In CSS, pseudoclasses are special keywords that modify the styles of an element based on its state or interaction. Unlike classes, which are typically assigned by the developer, pseudoclasses are dynamically applied depending on user actions or element behavior. Think of them as temporary costumes your elements wear in specific situations.



Here are some common examples of pseudoclasses:


    
  
  • :hover: Applies styles when the user hovers over an element. For example, you can use a:hover {color: red;} to make links turn red when hovered over.
    • 
  
  • :visited: Applies styles to links that have already been visited by the user. You might use a:visited {color: gray;} to differentiate visited links from unvisited ones.
    • 
  
  • :focus: Applies styles when an element has the focus, such as when a form field is selected. For example, input:focus {border: 2px solid blue;} can emphasize an input field when the user interacts with it.
    • 
  
  • :disabled: Applies styles to elements that are disabled and cannot be interacted with. For instance, button:disabled {opacity: 0.5;} can visually indicate that a button is unavailable.
    • 




Here are some benefits of using pseudoclasses:


    

  •  Improved user experience: You can create visual cues and feedback that enhance user interaction with your web page.
    • 

  • More dynamic and responsive design: Elements can adapt their appearance and behavior based on user actions or context.
    • 

  •  Reduced code repetition: Pseudoclasses can eliminate the need for repeatedly specifying styles for different element states.
    • 




What are Pseudo-elements in CSS?


Pseudo-elements are keywords attached to selectors that let you style specific parts of an element, like its first letter, content before or after it, or even the user's selection. They act like invisible hands, reaching into the code and tweaking the visual fabric of your page with precision.



Here are some common types of pseudo-elements:



    
  
  •  ::first-letter and ::first-line : Spotlight the first letter or line of an element, making it stand out like a bold headline.
    • 
  
  • ::before and ::after : Generate content before or after an element, like adding decorative icons, subtle underlines, or even entire paragraphs.
    • 
  
  • ::selection : Transform the text users highlight, making it stand out and providing visual feedback.
    • 
  
  • ::placeholder : Style the text that appears inside input fields before users start typing, turning them into informative prompts.
    • 
  
  • :hover and :active : Breathe life into interactive elements like buttons and links by changing their appearance when users hover over or click them.
    • 









HTML Code for PseudoClasses and Psuedoelements


 <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="test.css">
    <title>Document</title>
  </head>
  <body>
  <div>
    <p>Lorem ipsum dolor <em>sit amet,</em> consectetur adipisicing elit. Accusamus harum debitis corporis modi eveniet delectus optio cumque dicta, voluptatem praesentium, in alias exercitationem quae perspiciatis impedit, perferendis dolorum maxime consequatur.</p>
  </div>
  </body>
  </html> 

  

  

  



CSS File


 /* psuedo elements in CSS */
  p::first-line
  {
      color:red;
  }
  
  p::first-letter
  {
      color:blue;
  }
  
  p::before
  {
      content:url(images/caption.jgp);
  }
  
  p::after
  {
      content:url(images/caption.jgp);
  }
  
  /* psuedo classes in CSS */
  div:hover
  {
      background-color: aqua;
      width: 300px;
      height: 300px;
  }
  
  p:first-child
  {
      background-color:red;
  }
  
  p em:first-child
  {
      color:red;
  } 

  

  



    
Output

    image of a webpage showing use of pesudoclass in css