FSR060523 :- Css Questions | Pseudo Class & Pseudo Elements

Q.s 1 :- What is the difference between pseudo class and pseudo element in css ?
Q.s 2 :- Add Gradient Border to the paragraph with After & Before
Output :-

1 Like

Ans 1:- pseudo-class is used to define a special state of an element.Eg.Style visited and unvisited links differently .link_style:visited
{
color: violet;
}

Ans 1 :- pseudo-element is used to style specified parts of an element.
Eg. .text_1::first-letter{
font-size: 20px;
color: darkred;
}

2 Likes

pseudo class is used to define special state of an element
pseudo element is is used to style specfic part of element

2 Likes
1. Psuedo class:- A selector that specifies a special state of selected elements. 
E.g :- button:hover {
color:blue;
}  
Psuedo elements:- A selector used for targeting an extra element without adding more Html elements.
e.g  h1:: before {
content: " demo data";
}


1 Like
<!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">
    <title>Document</title>
    <style>

        p{
            width: 600px;
            font-size: 20px;
            color: goldenrod;
            display: flex;
            margin: 300px auto;
        }
        p::after{
            content: '';
            padding: 5px;
            margin-left: 20px;
            height: 100px;
            background: linear-gradient(to top,red, blue);
        }
        p::before
            {
            content: '';
            margin-right: 20px;
            padding: 5px;
            height: 100px;
            background: linear-gradient(to top,red, blue);
        }
        
    </style>
</head>
<body>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.<br> 
        Molestiae tempore distinctio deleniti rerum facilis soluta recusandae quisquam eum,<br>
         eius accusamus perferendis eaque laborum enim nesciunt!</p>
</body>
</html>
1 Like

You need to add gradient colors to the border

Pseudo-class in CSS: A pseudo-class is used to select and style elements based on their state or relation to the document tree. It allows you to target elements that are in a specific state or context, such as when they are being hovered over, focused, or the first child of their parent element. Pseudo-classes are denoted by a single colon (β€œ:”) followed by the name of the pseudo-class.

a:hover {
color: red;
}
Pseudo-element in CSS: A pseudo-element is used to style a specific part of an element. It allows you to create virtual elements and apply styles to them, without the need for extra HTML markup. Pseudo-elements are denoted by a double colon (β€œ::”) followed by the name of the pseudo-element.

p::before {
content: β€œBefore”;
}
::before pseudo-element is used to insert content before the content of every <p> element.

1 Like

pseudo-class select element based on their state or position within the document
pseudo -element style specific parts of an elements content by creating virtual elements

1 Like
<!DOCTYPE html>
<html>
<head>
  <style>
    p {
  position: relative;
}

p::before {
  content: "";
  position: absolute;
  top: -5px; 
  left: -5px;
  right: -5px; 
  bottom: -5px;
  border: 5px solid;  
  border-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  border-image-slice: 1; 
}

p::after {
    content: "";
  position: absolute;
  top: -5px; 
  left: -5px;
  right: -5px; 
  bottom: -5px;
  border: 5px solid;  
  border-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  border-image-slice: 1; 
  
}

  </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus commodo tortor, ut ullamcorper risus rhoncus sed. Nulla efficitur varius augue id luctus. Sed non nibh malesuada, posuere mauris nec, mattis orci. Proin commodo, mauris eget dapibus cursus, massa mauris dictum neque, at tempus nisl massa et neque. Curabitur aliquam odio id interdum cursus. Pellentesque sit amet elementum velit. Phasellus interdum ligula eget dui faucibus, a sollicitudin sem congue. Sed semper euismod neque vel faucibus. Nulla facilisi. Sed efficitur quam eu elit iaculis, vel gravida purus laoreet.</p>
  </body>
</html>

pseudo class- it is used to define special state of element.
pseudo element- before:: pseudo element: after

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      position: relative;
      padding: 10px;
    }

    p::before,
    p::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    p::before {
      z-index: -1;
      border: 2px solid;
      border-image: linear-gradient(to right, #ff0000, #00ff00) 1;
      border-image-slice: 1;
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus commodo tortor, ut ullamcorper risus rhoncus sed. Nulla efficitur varius augue id luctus. Sed non nibh malesuada, posuere mauris nec, mattis orci. Proin commodo, mauris eget dapibus cursus, massa mauris dictum neque, at tempus nisl massa et neque. Curabitur aliquam odio id interdum cursus. Pellentesque sit amet elementum velit. Phasellus interdum ligula eget dui faucibus, a sollicitudin sem congue. Sed semper euismod neque vel faucibus. Nulla facilisi. Sed efficitur quam eu elit iaculis, vel gravida purus laoreet.</p>
</body>
</html>

1- pseudo classes are used to target state. expressed by adding colon(:slight_smile:
eg: for hover effect, focus ,active
-pseudo elements are used for styling specific part of selected elements(::slight_smile:
eg: for styling first line of para ,before, after etc…

2-p{
width: 25%;
color: blueviolet;
font-size: 25px;
margin: 20px;
display: flex;
padding: 20px;
}

.text::before{
content: β€œβ€ ;
width: 50px;
height: 200px;
margin-right: 20px;
background-image: linear-gradient(pink,blue);
}
.text::after{
content: β€œβ€ ;
width: 50px;
height: 200px;
margin-left: 20px;
background-image: linear-gradient(pink,blue);
}

1)Pseudo Class: It will alters the states .It targets different states &it is denoted by :
ex: .text:hover{ background-color: blue;}
Pseudo Elements: It targets for elements.
ex: .text::after{ content : ’ data 1’;}
2)

<!doctype html>

.sec1{ display: flex; width: 58.5%; } .div1::after{ content: ""; height: 100px; width: 5px; display: inline-block; /* background-color: red; */ background-image: linear-gradient(rgb(222,107,174),rgb(25,12,129)); } .div1::before{ content: ""; height: 100px; width: 5px; display: inline-block; background-image: linear-gradient(rgb(222,107,174),rgb(25,12,129)); } .para{ transform: translatex(20px); width: 50%; color: rgb(127,23,14); font-family: Arial, Helvetica, sans-serif; /* border: 3px solid red; */ }

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto dolores harum esse ad dolorem,
eveniet hic minima aperiam quia atque labore amet itaque dolorum dolor tempore, natus ea, recusandae corrupti!

gajalakshoumy
session7[1].html - Google Drive @Hiral_Khakhariya