


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
Pseudo-selectors can be chained so that an element can have multiple selectors, for instance: img:not('.no-float'):hover{}
.
There are a few very general pseudo-selectors. These can be used on most element types and elements.
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;
}
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.
There are three link related pseudo-selectors. These can all be applied to the anchor element (<a>
.
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.
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; }
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;
}
There are also various form-related pseudo-selectors that affect elements normally found within a <form>
element.
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;
}
Browser often add focus
styling.
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; }
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;
}
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;
}
![]() | Happy New Year everyone! #2021NewYear 15 days ago |
![]() | Happy New Year everyone! All the best, Jamie Balfour. 15 days ago |
![]() | Retweet @PCMag: Adobe Flash support officially ends today. https://t.co/NNLcFK2yPx ![]() 15 days ago |