Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference Between Pseudo-Class and Pseudo-Element in CSS
Pseudo-Class
A pseudo-class represents a state of a selector like :hover, :active, :last-child, etc. These start with a single colon(:).
Syntax
The syntax of CSS pseudo-class is as follows −
:pseudo-class{ attribute: /*value*/ } Pseudo-Element
Similarly, a pseudo-element is used to select virtual elements like ::after, ::before, ::first-line, etc. These start with a double colon(::).
Syntax
The syntax of CSS pseudo-element is as follows −
::pseudo-element{ attribute: /*value*/ } Change the Link on Hover
The following example illustrate changing the link on hover using the CSS pseudo class −
Example
<!DOCTYPE html> <html> <head> <style> a:hover{ padding: 3%; font-size:1.4em; color: tomato; background: bisque; } </style> </head> <body> <p>You're somebody else</p> <a href=#>Dummy link 1</a> <a href=#>Dummy link 2</a> </body> </html> Change the Paragraph
Here, we have set a different style for paragraph text using the CSS pseudo class and element. Let us see the example −
Example
<!DOCTYPE html> <html> <head> <style> p::after { content: " BOOM!"; background: hotpink; } p:last-child { font-size: 1.4em; color: red; } </style> </head> <body> <p>Demo Text</p> <p>Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitaeneque consectetur tincidunt. Ut molestie vulputate sem, nec convallis odio molestie nec.</p> <p>Hit</p> <p>Pop</p> </body> </html> 
Updated on: 2023-11-01T16:12:14+05:30
4K+ Views
Advertisements