Welcome Guest! (App Version 3.1)

websitnero logo name

Pseudo Classes Selectors

Selectors based on Pseudo-Classes

Pseudo Classes refer to special kinds of selectors that not only select on basis of element or property but rather its state like :hover. The elements might be selected due to some external factors or history of events like :visited.

Look at the table below to have better understanding of various pseudo-classes selectors.

Pseudo Classes Selectors
S.No.NameRepresentationDescriptionExamples
1Focus:focusThis selector will select element that currently has focus, like clicking on an input box.
2Checked:checkedIt selects are checkboxes that are in checked state.
3Valid:validInput boxees with right data filled in, eg, email type input box has correct format.
4Invalid:invalidIt selects all input boxes with wrong inputs, say type number got text, or type email got invalid email written in text box.
5Enabled:enabledOpposite of disabled. If an input box is not disabled then it is selected.
6Disabled:disabled Selects all input boxes which are mentioned with attribute disabled.
7In Range:in-range Usually for input type number. The value in box lying with range of min and max.
8Out of Range:out-of-range Usually for input type number. The value lying outside the prescribed range.
9Optional:optional The input boxes or elements which are not necessary required to be filled or have not got required attribute with them.
10Required:requiredThe input boxes which have got required attribute in them and need to be filled necessarily.
11Read Only:read-only If data in the input box cannot be changed but can only be read.
12Read Write:read-writeCommon input boxes with no boundation of read-only attribute specifically mentioned in them.
13Link:link A common hyperlinked anchor tag.
14Hover:hoverPutting mouse over a link tag.
15Active:active Active state of link tag. To check just press mouse over link, but don't leave.
16Visited:visitedLink which is already visited in the browser to help user understand he went to this link earlier also.
17Empty:empty Selects empty elements with no data inside them.
18Language Selection:lang(language)Helps in multi-language websites to highlight special conversions or language than the one commonly used in page.
19Target:target Selects target element on the same page linked with an anchor tag.
20Root or Document Object Model:rootThis always represents root element, document object model or html tag.
Further Reading

1. Pseudo Classes

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.