CSS pseudo-classes



The CSS pseudo-classes are used to create some special effects to some selectors.

The CSS pseudo-classes permit you to style the dynamic states of a part like hover, active and focus state, likewise as parts that area unit existing within the document tree however cannot be targeted via the employment of different selectors while not adding any IDs or categories to them, as an example, targeting the primary or last kid parts.

selector:pseudo-class 
{ 
 property: value; 
}
    

a Pseudo-classes

Example

<!DOCTYPE html>
    <html>
    <head>
    <title>Anchor Pseudo-classes</title>
    <style> 
        a:link {
            color: red;
        }
        a:visited {
            text-decoration: none;
        }
    </style>
    </head>
    <body>        
        <p>Visit <a href="https://www.elementtutorials.com" target="_blank">www.elementtutorials.com</a></p>
    </body>
    </html>
    


Click on the "Run This Code" button to see how it works.


The pseudo-classes can change how the buttons and links are rendered in responce to user action.

The values are

Example

<!DOCTYPE html>
<html>
<head>
<title>Anchor Pseudo-classes</title>
<style> 
        a:link {
			color: purple;
		}
		a:visited {
			text-decoration: none;
		}
		a:hover {
			color: red;
		}
		a:active {
			color: tomoto;
		}
		a:focus {
			color: cyan;
		}
	</style>
	</head>
	<body>        
		<p>Visit <a href="https://www.elementtutorials.com" target="_blank">www.elementtutorials.com</a></p>
	</body>
	</html>
	


Click on the "Run This Code" button to see how it works.





CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units