{"id":71895,"date":"2016-06-09T10:21:16","date_gmt":"2016-06-09T14:21:16","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=71895"},"modified":"2016-11-14T09:40:59","modified_gmt":"2016-11-14T14:40:59","slug":"how-to-work-with-css-pseudo-classes","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-to-work-with-css-pseudo-classes.html","title":{"rendered":"How to work with css pseudo classes"},"content":{"rendered":"<div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/XC4iXPk4uFA\"><\/iframe>\r\n<\/div>\r\n<p>Our Support team is ready to present you a new tutorial that shows how to work with <strong>pseudo classes<\/strong> in css  rules. The pseudo class is used to define a specific state of an element, e.g., &#8216;hover&#8217; (states for mouseover), &#8216;focus&#8217; or &#8216;active&#8217;. You can check <a href=\"http:\/\/www.w3schools.com\/css\/css_pseudo_classes.asp\" target=\"_blank\" rel=\"nofollow\">this link<\/a> for a detailed description. In order to work with them, please, refer to steps, indicated below:<\/p>\r\n\r\n<ol>\r\n\t<li>\r\n\t\t<p>Open the page and press F12 hotkey to open Firebug (or different inspector) tool. You can learn more on how to use inspector tools at the following <a href=\"\/help\/developer-tools.html\" target=\"_blank\">page<\/a>.<\/p>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Locate the item you&#8217;d like to define styling for. In order to do this activate the inspector pressing the icon at the top left of the Firebug window(1) and click on the item in your page to inspect it(2):<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/06\/62.General.How_to_work_with_pseudo_classes_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/06\/62.General.How_to_work_with_pseudo_classes_1-300x169.png\" alt=\"62.General.How_to_work_with_pseudo_classes_1\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-71896\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/62.General.How_to_work_with_pseudo_classes_1-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/62.General.How_to_work_with_pseudo_classes_1-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/62.General.How_to_work_with_pseudo_classes_1-1024x576.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/62.General.How_to_work_with_pseudo_classes_1.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\t\r\n\t\t<p>Alternatively, you may click on the needed item with the right mouse button and choose <strong>&#8216;Inspect with Firebug&#8217;<\/strong> (or &#8216;Inspect&#8217; for other tools).<\/p>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>At the right side you&#8217;ll see the styles, applied to this item in its regular state. Choose a pseudo class by clicking on the small arrow at top of the <strong>Styles<\/strong> list to make the style rules with pseudo classes applied show up:<\/p>\t\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/06\/62.General.How_to_work_with_pseudo_classes_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/06\/62.General.How_to_work_with_pseudo_classes_2-300x169.png\" alt=\"62.General.How_to_work_with_pseudo_classes_2\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-71897\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/62.General.How_to_work_with_pseudo_classes_2-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/62.General.How_to_work_with_pseudo_classes_2-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/62.General.How_to_work_with_pseudo_classes_2-1024x576.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/62.General.How_to_work_with_pseudo_classes_2.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Now you can see the styles, affecting the item in the rest of states, for example, on hover. This will let you define the new color for buttons, change the scaling, etc. Feel free to edit the code changing the property value, e.g., color or background and add the <strong>!important<\/strong> statement before the <strong>;<\/strong> symbol at the end of the property line. You may refer to the example below:<\/p>\r\n\t\t<p><em>The initial rule (it defines the white link color on hover):<\/em><\/p>\r\n\t\t<pre class=\"brush:css\">\r\n\t\t\t.entry-content a:hover {\r\n\t\t\t\tcolor: #ffffff;\r\n\t\t\t}\r\n\t\t<\/pre>\r\n\t\t<p><em>Your changed rule (it makes same link to change its color to #123456 on hover):<\/em><\/p>\r\n\t\t<pre class=\"brush:css\">\r\n\t\t\t.entry-content a:hover {\r\n\t\t\t\tcolor: #123456 !important;\r\n\t\t\t}\t\t\t\r\n\t\t<\/pre>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>You can define any css property you need this way. When you&#8217;re done with adjusting the rule parameters, copy this new (changed) rule to the end of your .css file (it might be named as style.css, template.css, global.css, etc.). Feel free to check site after applying the edits. In some cases you can edit the original code directly, in this case adding the &#8216;!important&#8217; statement is not strictly required.<\/p>\t\r\n\t<\/li>\r\n<\/ol>\r\n<p>That&#8217;s all, now you know how to manage pseudo classes in CSS.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=XC4iXPk4uFA?width=1280&amp;height=720\" rel=\"prettyPhoto\">How to work with css pseudo classes<\/a>\r\n<p>And don&#8217;t forget to browse our brand new <a href=\"https:\/\/www.templatemonster.com\/admin-templates.php\" title=\"Bootstrap Admin Themes\" target=\"_blank\">Bootstrap Admin Themes<\/a> that extend the CSS functionality of your website.<\/p>","protected":false},"excerpt":{"rendered":"<p>Our Support team is ready to present you a new tutorial that shows how to work with pseudo classes in css  rules.<\/p>\n","protected":false},"author":59,"featured_media":71898,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[256],"tags":[515,514,1123],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/71895"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=71895"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/71895\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/71898"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=71895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=71895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=71895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}