{"id":1273,"date":"2022-05-23T19:06:26","date_gmt":"2022-05-23T19:06:26","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=1273"},"modified":"2023-03-27T12:11:31","modified_gmt":"2023-03-27T12:11:31","slug":"pseudo-classes-css","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/pseudo-classes-css\/","title":{"rendered":"Pseudo Classes CSS"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>Pseudo Classes CSS<\/strong><\/p>\n\n\n\n<p>The pseudo-class is a keyword added to a selector, to specify a certain state for the specified element. By state, we simply mean some particular situation, like when the user hovers over the element if the link is visited if some element gets focused, etc.<\/p>\n\n\n\n<p>Now, we are going to have a look at different pseudo-classes.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Pseudo Classes CSS | Lecture 10 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/xDeTN-AkZDQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>We use different pseudo-classes to represent different states of an element. For example, if we focus on some element, hover over some element, or if some link is visited, or unvisited, etc. There are many pseudo-classes and here we are going to have a look at some pseudo-classes.<\/p>\n\n\n\n<p>Here is the syntax for how are we going to use these pseudo-classes with our elements. Remember that whenever we write some pseudo-class, we put a single colon ( : ), and then we have the class name. (for example \u2192 hover, and the name of the selector comes before the colon. You can see the same thing in the below given example)<\/p>\n\n\n\n<p>someselector:pseudoclassname{<br>property:value;<br>\u2026<br>}<br>Here are some pseudo-classes &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>:hover \u2013 this is the state when we are hovering over the element.<\/li>\n\n\n\n<li>:link \u2013 this is for the link when the link is unvisited.<\/li>\n\n\n\n<li>:visited \u2013 this is for the visited link<\/li>\n\n\n\n<li>:active \u2013 this is the state when the link is active.<\/li>\n\n\n\n<li>:any-link \u2013 this is for the link in any state, visited or unvisited.<\/li>\n\n\n\n<li>:focus \u2013 this is when we are focusing on some element.<\/li>\n\n\n\n<li>:root \u2013 this is the pseudo-class that defines the root element, i.e HTML<\/li>\n\n\n\n<li>:first-child \u2013 this is the class to mark the first child of something.<\/li>\n\n\n\n<li>:last-child \u2013 this is the class to mark the last child of something.<\/li>\n\n\n\n<li>:only-child \u2013 this is the class to mark the only child.<\/li>\n\n\n\n<li>:nth-child() &#8211; this is the class to mark the nth-child among all the siblings.<\/li>\n<\/ul>\n\n\n\n<p>And so on&#8230;<\/p>\n\n\n\n<p>Now, let&#8217;s have a look at an example, which demonstrates the use of pseudo-classes. Remember that we are using the pseudo-classes with some other selector. In the below example, we have a link, on which, we are going to apply some different pseudo-classes, like hover, visited, link, etc.<\/p>\n\n\n\n<p>Have a look at the below example &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"806\" height=\"449\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/pseudo-classes.jpg\" alt=\"\" class=\"wp-image-1274\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/pseudo-classes.jpg 806w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/pseudo-classes-300x167.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/pseudo-classes-768x428.jpg 768w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/figure>\n<\/div>\n\n\n<p>In the above example, as you can see, we have specified some styles for some different states of the link, like when someone hovers over the link, or the link is unvisited, or when the link is visited. So, we get to see different styles for those different states of the link. Right now, we can say that we have a dummy link, so we are in the unvisited state yet. So, initially, the link looks like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"338\" height=\"176\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/pseudo-classes-1.jpg\" alt=\"\" class=\"wp-image-1275\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/pseudo-classes-1.jpg 338w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/pseudo-classes-1-300x156.jpg 300w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, this is an unvisited link. The background color is black and the color of the text is white. If the link is visited, it looks like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"395\" height=\"140\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/pseudo-classes-2.jpg\" alt=\"\" class=\"wp-image-1276\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/pseudo-classes-2.jpg 395w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/pseudo-classes-2-300x106.jpg 300w\" sizes=\"auto, (max-width: 395px) 100vw, 395px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, the visited link now has a background of red color. Also, if someone hovers over the link usually, the background color changes to pink and the color of the text turns white. So, you can use these pseudo-classes with some elements, as and when required. For example, you can do something when someone focuses on some elements, or you can do something if something is the first child or the last child of something, and much more. There is a lot to play with pseudo-classes.<\/p>\n\n\n\n<p>We just need to understand that there are some particular states, over which we are trying to specify some set of rules. We can use these pseudo-classes with a variety of elements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pseudo Classes CSS The pseudo-class is a keyword added to a selector, to specify a certain state for the specified element. By state, we simply mean some particular situation, like when the user hovers over the element if the link is visited if some element gets focused, etc. Now, we are going to have a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,13,176],"class_list":{"0":"post-1273","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-tutorial","9":"tag-pseudo-classes-css"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/1273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=1273"}],"version-history":[{"count":3,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/1273\/revisions"}],"predecessor-version":[{"id":5603,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/1273\/revisions\/5603"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=1273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=1273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=1273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}