How to work with css pseudo classes

Our Support team is ready to present you a new tutorial that shows how to work with pseudo classes in css rules. The pseudo class is used to define a specific state of an element, e.g., ‘hover’ (states for mouseover), ‘focus’ or ‘active’. You can check this link for a detailed description. In order to work with them, please, refer to steps, indicated below:

1. 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 page.

2. Locate the item you’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):

   

   Alternatively, you may click on the needed item with the right mouse button and choose ‘Inspect with Firebug’ (or ‘Inspect’ for other tools).

3. At the right side you’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 Styles list to make the style rules with pseudo classes applied show up:

   

4. 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 !important statement before the ; symbol at the end of the property line. You may refer to the example below:

   The initial rule (it defines the white link color on hover):

   			.entry-content a:hover {
   				color: #ffffff;
   			}
   		

   Your changed rule (it makes same link to change its color to #123456 on hover):

   			.entry-content a:hover {
   				color: #123456 !important;
   			}			
   		

5. You can define any css property you need this way. When you’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 ‘!important’ statement is not strictly required.

That’s all, now you know how to manage pseudo classes in CSS.

Feel free to check the detailed video tutorial below:

And don’t forget to browse our brand new Bootstrap Admin Themes that extend the CSS functionality of your website.