{"id":113615,"date":"2023-07-10T10:15:33","date_gmt":"2023-07-10T04:45:33","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=113615"},"modified":"2024-07-26T16:21:02","modified_gmt":"2024-07-26T10:51:02","slug":"css-pseudo-classes","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/","title":{"rendered":"CSS Pseudo Classes with Examples"},"content":{"rendered":"<p>In this article, you will learn about CSS Pseudo Classes. Let&#8217;s start with what is CSS Pseudo Classes.<\/p>\n<h3>What are CSS Pseudo Classes?<\/h3>\n<p>Certain selectors can have special effects added to them using CSS pseudo-classes. To apply such effects, you don&#8217;t need to use Js or any other script. In CSS, a pseudo class is used to specify an element&#8217;s unique state. It can be used in conjunction with a CSS selection to add a state-based impact to already-existing items. Updating the appearance of an element, for instance, when a user lingers over it or clicks a link. Pseudo Class in CSS can be used for all of these things.<\/p>\n<p>A selector&#8217;s term that specifies a specific state of the chosen element is called a CSS pseudo-class (s). When a user&#8217;s cursor hovers over a button, for instance, the pseudo-class:hover can be utilized to pick the button, which can subsequently be stylized.<\/p>\n<p>A pseudo-class is defined as the pseudo-class name followed by a colon (:). (e.g., :hover). A set of parentheses to define the parameters is also included in a functional pseudo-class (for example,:dir()). An anchor element is the one to which a pseudo-class is attached.<\/p>\n<p>Pseudo-classes permit you to apply a class to an element based on external characteristics in addition to the document tree&#8217;s content, such as the navigator&#8217;s history (:got to visit, for example), the element&#8217;s status (such as some features), or the mouse position.<\/p>\n<p>A specific condition of an item is specified by a pseudo-class.<\/p>\n<p>It can be utilised, for instance, to:<\/p>\n<ul>\n<li>When a user hovers their mouse over an element, it styles<\/li>\n<li>links that have been visited and those that have not<\/li>\n<li>Style as a component when it is highlighted<\/li>\n<\/ul>\n<p><strong>CSS pseudo-class Syntax:<\/strong><\/p>\n<p>A simple syntax of pseudo-classes is as follows:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">Selector:pseudo-class\r\n{\r\nproperty: value;\r\n}<\/pre>\n<p>Although there are many CSS pseudo-classes, in this article we&#8217;ll talk about some of the more popular ones.<\/p>\n<ul>\n<li><strong>focus:<\/strong> It chooses the aspect on which the user is currently focusing.<\/li>\n<li><strong>lang:<\/strong> It command specifies the language to be used in the given element.<\/li>\n<li><strong>link:<\/strong> It adds style to the unvisited link.<\/li>\n<li><strong>visited:<\/strong> It gives a visited link some flair.<\/li>\n<li><strong>first-child:<\/strong> It gives an element that is the offspring of another element special effects.<\/li>\n<li><strong>hover:<\/strong> As the user drags the mouse cursor over an element, hover: It provides special effects to the element.<\/li>\n<li><strong>active:<\/strong> It is used to give an active element some flair.<\/li>\n<\/ul>\n<h3>1. CSS focus Pseudo-class<\/h3>\n<p>The element that the user is now focusing is chosen using this pseudo-class. When a user clicks on one of the user input items used in forms, the script is invoked. The color palette of the input that is currently in focus changes in the example that follows.<\/p>\n<p><strong>For Example:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;CSS transition-property property&lt;\/title&gt;\r\n&lt;style&gt;\r\nform{\r\nwidth: 300px;\r\nheight: 200px;\r\nmargin: 0 auto;\r\ntext-align: center;\r\nline-height: 2rem;\r\n}\r\nlabel{\r\nwidth: 30%;\r\nfont-size:20px;\r\n}\r\ninput{\r\nbackground-color: default;\r\nfloat: right;\r\n}\r\ninput:focus{\r\nbackground-color: grey;\r\n}\r\nh1{\r\ncolor: rgb(255,0,242);\r\ntext-align: center;\r\nfont-size:50px;\r\n}\r\nh2{\r\ncolor: blue;\r\ntext-align: center;\r\nfont-size:40px;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n&lt;h1&gt;DataFlair&lt;\/h1&gt;\r\n&lt;h2&gt;Pseudo-class:focus&lt;\/h2&gt;\r\n&lt;form&gt;\r\n&lt;label for=\"username\"&gt;UserId:&lt;\/label&gt;\r\n&lt;input type=\"text\" name=\"username\"\r\nplaceholder=\"Enter UserId\" \/&gt;\r\n&lt;br&gt;\r\n\r\n&lt;label for=\"emailid\"&gt;Email Address:&lt;\/label&gt;\r\n&lt;input type=\"email\" name=\"emailid\"\r\nplaceholder=\"Enter email address\" \/&gt;\r\n\r\n&lt;label for=\"Password\"&gt;Passcode:&lt;\/label&gt;\r\n&lt;input type=\"password\" name=\"Password\"\r\nplaceholder=\"Enter passcode\" \/&gt;\r\n&lt;\/form&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/focus-pseudo-class.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114296\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/focus-pseudo-class.webp\" alt=\"focus pseudo class\" width=\"1920\" height=\"845\" \/><\/a><\/p>\n<h3>2. CSS Anchor Pseudo-classes<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\nbody{\r\ntext-align: center;\r\nfont-size:30px;\r\n}\r\na:link {\r\ncolor: green;\r\nfont-size:25px;\r\n}\r\na:visited {\r\ncolor: hotpink;\r\n}\r\na:hover {\r\ncolor: red;\r\n}\r\na:active {\r\ncolor: blue;\r\n}\r\np{\r\nfont-size:20px;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h2 style=\"color:rgb(255,0,242)\"&gt;DataFlair&lt;\/h2&gt;\r\n&lt;p&gt;&lt;b&gt;&lt;a href=\"default.asp\" target=\"_blank\"&gt;This is a link&lt;\/a&gt;&lt;\/b&gt;&lt;\/p&gt;\r\n&lt;p&gt;To be effective, a:hover MUST follow a:link and be included in the CSS declaration.&lt;\/p&gt;\r\n&lt;p&gt;a:active In order to work, it MUST follow a:hover in the Style declaration.&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/anchor-pseudo-classes.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114297\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/anchor-pseudo-classes.webp\" alt=\"anchor pseudo classes\" width=\"1920\" height=\"846\" \/><\/a><\/p>\n<h3>3. CSS lang pseudo classes<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE HTML&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\nbody{\r\ntext-align:center;\r\nfont-size: 20px;\r\n}\r\nh1{\r\ncolor: rgb(255,0,242);\r\n}\r\np:lang(fr)\r\n{\r\nfont-family:Verdana;\r\ncolor:green;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;DataFlair&lt;\/h1&gt;\r\n&lt;p&gt;Excluding lang pseudo class&lt;\/p&gt;\r\n&lt;p lang=\"fr\"&gt;Including lang pseudo class&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/lang-pseudo-classes.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114298\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/lang-pseudo-classes.webp\" alt=\"lang pseudo classes\" width=\"1920\" height=\"856\" \/><\/a><\/p>\n<h3>4. CSS visited pseudo-class<\/h3>\n<p>The URLs that have already been viewed by the user are chosen using the visited pseudo-class. When a link is clicked in the example below, its colour changes.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;CSS transition-property property&lt;\/title&gt;\r\n&lt;style&gt;\r\nbody{\r\ntext-align: center;\r\n}\r\nh1{\r\ncolor: rgb(255,0,242);\r\nfont-size: 40px;\r\n}\r\nh2{\r\ncolor: blue;\r\nfont-size: 30px;\r\n}\r\na:visited{\r\ncolor: green;\r\nfont-size:50px;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n&lt;h1&gt;DataFlair&lt;\/h1&gt;\r\n&lt;h2&gt;:visited Pseudo-class&lt;\/h2&gt;\r\n&lt;p&gt;\r\n&lt;a href=\"https:\/\/www.geeksforgeeks.org\/\" target=\"_blank\"&gt;\r\nWhen you click this link, my color changes.\r\n&lt;\/a&gt;\r\n&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/visted-pseudo-class.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114299\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/visted-pseudo-class.webp\" alt=\"visted pseudo class\" width=\"1784\" height=\"859\" \/><\/a><\/p>\n<h3>5. Merely a tooltip hover<\/h3>\n<p>As the user hovers the cursor over an element, a tooltip provides additional information about that element. Let&#8217;s use the &#8220;:hover&#8221; pseudo-class to build a tooltip.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\nbody{\r\ntext-align:center;\r\n}\r\nh2{\r\ndisplay: none;\r\nbackground-color: brown;\r\ncolor:white;\r\npadding: 20px;\r\n}\r\ndiv{\r\nfont-size:60px;\r\ncolor: rgb(255,0,242);\r\n}\r\ndiv:hover h2 {\r\ndisplay: block;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;To see the outcome, move your mouse over the text below.&lt;\/h1&gt;\r\n&lt;div&gt;DataFlair\r\n&lt;h2&gt;Welcome to the world!!!&lt;\/h2&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/merely-a-tooltip-hover.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114300\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/merely-a-tooltip-hover.webp\" alt=\"merely a tooltip hover\" width=\"1920\" height=\"855\" \/><\/a><\/p>\n<h3>6. CSS active pseudo-class<\/h3>\n<p>With the active pseudo-class, you can choose an element that becomes active whenever the visitors click on it. The sample that follows shows how the box&#8217;s background colour briefly changes when users tap on it.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;CSS transition-property property&lt;\/title&gt;\r\n&lt;style&gt;\r\n.box{\r\nbackground-color: yellow;\r\nwidth: 300px;\r\nheight: 200px;\r\nmargin: auto;\r\nfont-size: 40px;\r\ntext-align: center;\r\n}\r\n.box:active{\r\nbackground-color: orange;\r\n}\r\nh1{\r\ncolor: rgb(255,0,242);\r\ntext-align: center;\r\nfont-size: 50px;\r\n}\r\nh2{\r\ncolor: blue;\r\ntext-align: center;\r\nfont-size: 30px;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;DataFlair&lt;\/h1&gt;\r\n&lt;h2&gt;:active Pseudo-class&lt;\/h2&gt;\r\n&lt;div class=\"box\"&gt;\r\nIf you click me, I briefly change colour!\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/active-pseudo-class.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114301\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/active-pseudo-class.webp\" alt=\"active pseudo class\" width=\"1920\" height=\"858\" \/><\/a><\/p>\n<h3>7. CSS hover Pseudo class<\/h3>\n<p>When our cursor hovers over an element, this pseudo-class adds a particular effect to it. The illustration below shows how the box&#8217;s backdrop colour transforms from orange to yellow as your mouse reaches the box region.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;CSS transition-property property&lt;\/title&gt;\r\n&lt;style&gt;\r\n.box{\r\nbackground-color: orange;\r\nwidth: 300px;\r\nheight: 200px;\r\nmargin: auto;\r\nfont-size: 40px;\r\ntext-align: center;\r\n}\r\n.box:hover{\r\nbackground-color: yellow;\r\n}\r\nh1{\r\ncolor: rgb(255,0,242);\r\ntext-align: center;\r\nfont-size: 40px;\r\n}\r\nh2{\r\ncolor: blue;\r\ntext-align: center;\r\nfont-size: 30px;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;DataFlair&lt;\/h1&gt;\r\n&lt;h2&gt;:hover Pseudo-class&lt;\/h2&gt;\r\n&lt;div class=\"box\"&gt;\r\nIf you hover over me, my colour will change!\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/hover-pseudo-class.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-114302\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/hover-pseudo-class.webp\" alt=\"hover pseudo class\" width=\"1920\" height=\"852\" \/><\/a><\/p>\n<p>Also pseudo-classes allow the selector to select elements depending on their state with the help of \u2018pseudo-classes\u2019 which do not require the use of more JavaScript thus keeping the code simple and effective. In the future web development, CSS pseudo-classes will also continue to be a valuable tool in creating user-friendly websites.<\/p>\n<h3>Summary<\/h3>\n<p>This was all about CSS pseudo-classes and its types with examples.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, you will learn about CSS Pseudo Classes. Let&#8217;s start with what is CSS Pseudo Classes. What are CSS Pseudo Classes? Certain selectors can have special effects added to them using CSS&#46;&#46;&#46;<\/p>\n","protected":false},"author":581,"featured_media":114333,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27226],"tags":[32756,32755,27518],"class_list":["post-113615","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutorials","tag-css-active-pseudo-class","tag-css-hover-pseudo-class","tag-css-pseudo-classes"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Pseudo Classes with Examples - DataFlair<\/title>\n<meta name=\"description\" content=\"Pseudo classes in CSS are used to specify element&#039;s unique state. Learn more about it, its types and properties with examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Pseudo Classes with Examples - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Pseudo classes in CSS are used to specify element&#039;s unique state. Learn more about it, its types and properties with examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-10T04:45:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-26T10:51:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/css-pseudo-classes.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Pseudo Classes with Examples - DataFlair","description":"Pseudo classes in CSS are used to specify element's unique state. Learn more about it, its types and properties with examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/","og_locale":"en_US","og_type":"article","og_title":"CSS Pseudo Classes with Examples - DataFlair","og_description":"Pseudo classes in CSS are used to specify element's unique state. Learn more about it, its types and properties with examples.","og_url":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-07-10T04:45:33+00:00","article_modified_time":"2024-07-26T10:51:02+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/css-pseudo-classes.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445"},"headline":"CSS Pseudo Classes with Examples","datePublished":"2023-07-10T04:45:33+00:00","dateModified":"2024-07-26T10:51:02+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/"},"wordCount":688,"commentCount":1,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/css-pseudo-classes.webp","keywords":["CSS active pseudo-class","CSS hover Pseudo class","CSS pseudo classes"],"articleSection":["CSS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/","url":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/","name":"CSS Pseudo Classes with Examples - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/css-pseudo-classes.webp","datePublished":"2023-07-10T04:45:33+00:00","dateModified":"2024-07-26T10:51:02+00:00","description":"Pseudo classes in CSS are used to specify element's unique state. Learn more about it, its types and properties with examples.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/css-pseudo-classes.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/css-pseudo-classes.webp","width":1200,"height":628,"caption":"css pseudo classes"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/css-pseudo-classes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"CSS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/css-tutorials\/"},{"@type":"ListItem","position":3,"name":"CSS Pseudo Classes with Examples"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team provides high-impact content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. We make complex concepts easy to grasp, helping learners of all levels succeed in their tech careers.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam6\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=113615"}],"version-history":[{"count":9,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113615\/revisions"}],"predecessor-version":[{"id":142963,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113615\/revisions\/142963"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/114333"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=113615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=113615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=113615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}