Categories
CSS Tutorials

Pseudo–classes

introduction
Formatting Text
Box Model
Advanced selectors
More about CSS

The CSS pseudo-classes allow you to style the dynamic states of an element such as hover, active and focus state, as well as elements that are existing in the document tree but can’t be targeted via the use of other selectors without adding any IDs or classes to them, for example, targeting the first or last child elements. A pseudo-class starts with a colon (:).

Syntax:

selector:pseudo-class { property: value; }

Anchor Pseudo-classes

Using anchor pseudo-classes links can be displayed in different ways:

These pseudo-classes let you style unvisited links differently from visited ones. The most common styling technique is to remove underlines from visited links.

Example:

a:link { 
  color: blue; 
} 
a:visited { 
  color: yellow;
}

:hover pseudo-class

This pseudo-class is used to add special effect to an element when our mouse pointer is over it.

Example:

<html>
  <head>
  	<style>
  	.box{
  		background-color: yellow;
  		width: 300px;
  		height: 200px;
  		margin: auto;
  		font-size: 40px;
  		text-align: center;
  	}
  
  
  	.box:hover{
  		background-color: pink;
  	}
  
  
  	h1, h2{
  		color: green;
  		text-align: center;
  	}
  	</style></head>
  
  
  <body>
  	<h1>Edupoly Tutorials</h1>
  	<h2>:hover Pseudo-class</h2>
  	<div class="box">
  		My color changes if you hover over me!
  	</div>
  </body>
</html>

Here, when the mouse enters the box area, its background color changes from previous color to given color.

Without moving mouse on the box   When we move mouse on the box 

:active pseudo-class

This pseudo-class is used to select an element which is activated when the user clicks on it. Usually this is used when we create navigation bar. When we click on one link that link is the active link. So whatever effects we given for :active pseudo-class, that effects will be applied to that link when we click on it.

Example:

<html>
	<head>
		<style>
			.box {
				background-color: yellow;
				width: 300px;
				height: 200px;
				margin: auto;
				font-size: 40px;
				text-align: center;
			}
			.box:active {
				background-color: pink;
			}
			h1,
			h2 {
				color: red;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1>Edupoly Tutorials</h1>
		<h2>:active Pseudo-class</h2>
		<div class="box">
			My color changes for a moment if you click me!
		</div>
	</body>
</html>

Without clicking on the box     When we click on the box

:focus pseudo-class

This pseudo-class is used to select an element which is currently focused by the user. It works on user input elements used in forms and is triggered as soon as the user clicks on it.

Example:

<html>
    <head>
        <style>
            form {
                width: 300px;
                height: 200px;
                margin: 0 auto;
                text-align: center;
                line-height: 2rem;
            }
            label {
                width: 30%;
            }
            input {
                background-color: default;
                float: right;
            }
            input:focus {
                background-color: skyblue;
            }
            h1,h2 {
                color: red;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>Edupoly Tutorials</h1>
        <h2>:focus Pseudo-class</h2>
        <form>
            <label for="username">Username:</label>
            <input type="text" name="username" placeholder="Enter your username" />
            <br>
            <label for="emailid">Email-Id:</label>
            <input type="email" name="emailid" placeholder="Enter your email-id" />
            <label for="Password">Password:</label>
            <input type="password" name="Password" placeholder="Enter your password" />
        </form>
    </body>
</html>

Output: