Part 5.1An introduction to pseudo-selectors

Selectors have been defined previously in this tutorial as being either a class selector, an identity selector or a tag selector.

They were defined as three types as below:

.class{
	/*Class Selector*/
}
#id{
	/*Identity Selector*/
}
p{
	/*Tag Selector*/
}
								

These selectors allow any element on a page to be styled, including the root html and body elements.

However, every single one of these selectors is static, that means that all it does is states that when the page is loaded it should be styled in a specific way. They do not consider events such as hover.

For this reason, pseudo-selectors exist in CSS. These are so called pseudo because they are not actually selectors, they are closer to being selectors on selectors. As a principle, they extend a class, an ID or tag selection.

A pseudo-selector is applied to a selector using a colon:

selector:pseudo-selector

General pseudo-selectors

There are a few very general pseudo-selectors. These can be used on most element types and elements.

Hover

The hover is the first of these. The hover pseudo-selector can be applied to most elements to change CSS for an element when either the mouse hovers the element or, for touch, when the user presses once on the element.

#hoverBtn:hover{
	background: #0d0;
}
								

Not

Another very popular pseudo-selector is the not selector.

The not pseudo-selector is affects all elements that do not meet the conditions. It is particularly useful when CSS is applied to a general collection of elements such as all the <p> tags and there is just one class of element that should not follow the rules defined on the tag.

button:not(.no-background){
	background: #0d0;
}
								

The not selector can be seen as negating the effects of the selector it is attached to.

Link-related pseudo-selectors

There are three link related pseudo-selectors. These can all be applied to the anchor element (<a>.

Active

The first of these pseudo-selectors is the active selector. This is used to determine CSS properties for when a link is 'active'. This means when the link has been clicked and the link has initated the code or the page is changing to the linked page.

a:active{
	background: #0f0;
}
								

The active pseudo-selector can be particularly useful with JavaScript based <button> elements.

Link

The next pseudo-selector is the link pseudo-selector. If an anchor (<a>) has no href attribute specified, it is still considered an anchor, but one without a link.

The link pseudo-selector allows selection of anchors that have a href attribute specified.

a{
	color: #000;
}
a:link{
	background: #0f0;
}
								

Visited

There is also a pseudo-selector for a link that is visited. This is of course the visited pseudo-selector.

When the user has visited a link in the past the link changes colour.

a:visited{
	color: #00f;
}
								

Form-related pseudo-selectors

There are also various form-related pseudo-selectors that affect elements normally found within a <form> element.

Focus

The focus pseudo-selector is used when an element has the focus of the browser. This means, for a text input, when the IBeam is visible within that element.

This is particularly good for giving the user an idea of what element they are selected on if they use the keyboard to tab around the webpage.

input:focus{
	border: 2px #00a solid;
}
								

Focus within

The focus-within pseudoselector is one of the most useful but at the same time very strange pseudselectors. The reason it is strange is down to the way in which CSS works. CSS rarely ever allows a parent element to be styled due to a child receiving some interaction (such as hover) but with focus-within this is possible.

focus-within is activated whenever a child element of the element with this the pseudoselector receives focus. This means, for example, whenever an input box within the element has the mouse and keyboard focus, the element containing it will change based on the rule.

div:focus-within{
	border-color: #f00;
}
								

Take a look at this example from this website:

Enabled and disabled

There is also an option for enabled and disabled form elements. These are simply the enabled and disabled pseudo-selectors.

input:enabled{
	border: 2px #ddd solid;
}
input:disabled{
	border: 2px #f00 solid;
}
								

Checked

The <input> element has multiple types ranging from text input fields to checkboxes and radio buttons. The checked pseudo-selector is used to work with checkboxes.

This pseudo-selector is activated when a checkbox is checked.

The following sample adds a margin to a checkbox when it is selected. The reason a margin is added rather than a colour is because certain web browsers make it harder to do this.

input:checked{
	margin: 10px;
}
								

Indeterminate

The indeterminate pseudo-selector works on radio buttons that have no value, i.e. they are neither selected nor not selected. This occurs when the page loads and there has been no interaction with a set of radio buttons.

input:indeterminate{
	margin: 10px;
}