In the previous post I have talked about selecting particular portion of an HTML document while designing web pages. You can style multiple sections of an HTML document using CSS. There are selectors pseudo classes like pseudo elements allow CSS selectors to specify styles for multiple sections of a document tree that may not have style groups clearly associated with them. Traditionally, pseudo classes were dominantly used with link states and simple interface states, but under CSS2 and CSS3, the number of pseudo classes has exploded to include a wide variety of document position and tree logic selectors. Here I am describing syntax and examples of different pseudo-class selectors used in CSS.
Table of Contents
Link Related Pseudo Classes
If you are new with using web sites, you’ll know that there are three primary states of typical text links: unvisited, visited and active -in which the link text color is blue, purple and red, respectively. In CSS, the presentation of link states is controlled through the pseudo class selectors- a:link, a:visited and a:active.
a:link {color:green; text-decoration:none;}
a:active {color:pink; background-color: #00aaff;}
a:visited {color:brown; text-decoration:none;}
CSS2 also adds a:hover for the mouse hovering over a link. Similarly, the pseudo class :focus would be selected when the link gains focus, generally through keyboard navigation.
a:hover {color:red; text-decoration:underline;}
a:focus {border:1px dashed #00aaff}
Example:
Here is an example to illustrate the uses of a:link, a:active, a:visited, a:hover and a:focus Pseudo-Classes in HTML document.
CSS code: a:link {color:green; text-decoration:none;}
a:active {color:pink; background-color: #00aaff;}
a:visited {color:brown; text-decoration:none;}
a:hover {color:red; text-decoration:underline;}
a:focus {border:1px dashed #00aaff}
HTML code: <a href="https://siteforinfotech.com">Infotech Site-Best Place For Complete IT Tips</a>
Demo:
See the Pen PqgqXX by Shuseel Baral (@shuseel) on CodePen.
Activity Related Pseudo Classes
I have just talked about link related pseudo classes a:hover and a:focus-used mainly to change the appearance of links when user hover and focus on them. There are another pseudo classes related to user activity, they are :hover and :focus-can apply pseudo class to any element. The :focus pseudo class is used to apply a rule to an element only when that element has focus. To set any text input field to have pink background color when it gains focus, you could use the following rule.
input[type=text]:focus {background-color:pink;}
Similarly, to set any paragraph to have light-blue color when mouse is hover to it, you could use a rule such as the following.
p:hover {background-color:pink;}
Example:
Here is an example to illustrate the uses of :hover and :focus activity related pseudo-classes in HTML document.
CSS code: input[type=text]:focus {background-color:pink;}
input[type=text]:hover {background-color:yellow;}
.animate:hover {background-color:pink;}
HTML code: <p class="animate">This whole paragraph will animate on mouse hover</p> <p>Now only<span class="animate>this word</span> will animate on mouse hover</p> <form action="#"><div><input type="text" value="Hover or Focus on this"></div></form>
Demo:
See the Pen mJgJvz by Shuseel Baral (@shuseel) on CodePen.
Interface State Pseudo Classes
User interface elements such as forms have various states depending on user activity. CSS3 introduces pseudo classes to style form elements depending on state. For example, :enabled and :disabled are used to specify the style for elements that have been enabled or disabled, respectively. For example the rule
input[type=text]:enabled {background-color:pink;}
input[type=text]:disabled {background-color:gray;}
Similarly, the style of check boxes and radio buttons can be controlled using the :checked pseudo class. For example the rule
input[type=checkbox]:checked {border:1px dotted red;}
There are another user interface selectors defined in CSS3 like :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write. For an example here are the rules
input[type=text]:read-only {border:2px solid brown;}
In a web form, there may be any option default in a input field, for example in a set of radio buttons there may be any option default. Similarly in checkbox option there may be one or more option default. Using :default selector you can apply custom style for them using the following rule.
input:default + label{color: blue;}
It will make the label color blue for default value of input field.
The :required CSS pseudo-class represents any <input> element that has the required attribute set on it. This allows forms to easily indicate which fields must have valid data before the form can be submitted.The :optional pseudo-class may be used to provide an appearance for optional form fields. For example here are the rules
input:required {border-color: blue;border-width: 3px;}
input:optional {border-color: green;border-width: 3px;}
The :invalid CSS pseudo-class represents any <input> or <form> element whose content fails to validate according to the input’s type setting. This allows you to easily have invalid fields adopt an appearance that helps the user identify and correct errors. Similarly :valid pseudo class is used for valid data. For example here are the rules
input:invalid {background-color: brown;}
input:valid {background-color: pink;}
The :read-write CSS pseudo-class matches when an element is editable by user like text input element and :read-only CSS pseudo-class matches when an element is not editable by user like label element. For example here are the rules
input:read-write {background: white;}
input:read-only{background: #999;}
The :in-range CSS pseudo-class matches when an element has its value attribute inside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is inside the range limits. The CSS pseudo-class :out-of-range is opposite of :in-range pseudo-class. For example here are the rules
input:in-range {background-color: light-green;}
input:out-of-range {background-color: pink;}
Demo:
See the Pen zGXvvd by Shuseel Baral (@shuseel) on CodePen.
Read Next:How to Style Multiple Sections of an HTML Doucment Using CSS [cont.]
