CSS selectors

Selectors in css

It is important one. CSS Selectors used to select an specific element based on its name, id, class or even more.

A selector is represented using a symbol and the attribute value name.

Symbol varies differently for each attribute type.

For example to represent a class attribute value dot(.) symbol is used, for id attribute # symbol is used.

S.No Selector Description Example
* It is used to select all elements. Try Yourself
.classValue It is used to select the particular element with the specified class value. Dot(.) is used to access the class value. Try Yourself
#idValue It is used to select the particular element with the specified id value. Hash(#) is used to access the id value. Try Yourself
#idValue1,#idValue2,...n It is used to select more than one elements with specified id values. Try Yourself
#idValue1 #idValue2 ...n It is used to select a particular child of an element. #idValue1 specify the root element, #idValue2 specify the child element of #idValue1. Try Yourself
.classValue1,.classValue2,...n It is used to select more than one elements with specified class values. Try Yourself
.classValue1 .classValue2 ...n It is used to select a particular child of an element. #idValue1 specify the root element, #idValue2 specify the child element of #idValue1. Try Yourself
.classValue1>.classValue2 It is used to select the child element only if it has the particular parent element. .classValue1 specify the parent element, .classValue2 specify the child element of .classValue1. Try Yourself
.classValue1+.classValue2 It is used to select a single element which immediately follows the specified element. Try Yourself
.classValue1~.classValue2 It is used to select a single element which immediately precedes the specified element. Try Yourself
[attributeName] It is used to select all the elements which has the specified attribute name. Try Yourself
[attributeName=value] It is used to select all the elements which has the specified exact value in the attribute. Try Yourself
[attributeName*=value] It is used to select all the element if the attribute value contains the given text. Try Yourself
[attributeName~=value] It is used to select all the element if the particular value is present as a word in the specified attribute. Try Yourself
[attributeName^=value] It is used to select all the element if the attribute value starts with the given text. Try Yourself
[attributeName|=value] It is used to select all the element if the attribute value starts with the given text, also other word can follow it separating both by hyphen (-). Try Yourself
[attributeName$=value] It is used to select all the element if the attribute value ends with the given text. Try Yourself
:active It is used to select the active element. Try Yourself
::after It is used to add content after the given element. Try Yourself
::before It is used to add content before the given element. Try Yourself
:checked It is used to select all the checked element (radio & check box). Try Yourself
:disabled It is used to select all the disabled elements. Try Yourself
:empty It is used to select all empty elements. Try Yourself
:enabled It is used to select all the enabled elements. Try Yourself
:first-child It is used to select the first child element. Try Yourself
::first-letter It is used to select the first letter in the element. Try Yourself
::first-line It is used to select the first line in the element. Try Yourself
:first-of-type It is used to select the first element of all its sibling elements. Try Yourself
:focus It is used to select the focused element. Try Yourself
:hover It is used to select the specified element if the mouse hovers over it. Try Yourself
:in-range It is used to select the specified element if the value is within the given range. Try Yourself
:invalid It is used to select the specified element if the given value is invalid. Try Yourself
:lang(language) It is used to select the specified element if the given value matches the lang attribute value. Try Yourself
:last-child It is used to select the last child element of a parent element and the last of all the given element. Try Yourself
:last-of-type It is used to select the last child element of a parent element and the last element. Try Yourself
:link It is used to represent a link. Try Yourself
:not(selector) It is used to select all the elements except the given element. Try Yourself
:nth-child(n) It is used to select the element by the given value. Try Yourself
:nth-last-child(n) It is used to select the element only if the given element is in the specified position counting from the bottom. Try Yourself
:nth-last-of-type(n) It is used to select the element in the specified position counting from the bottom, if it is inside the parent element or outside. Try Yourself
:nth-of-type(n) It is used to select the element in the specified position, if it is inside the parent element or outside. Try Yourself
:only-of-type It is used to select the child from the parent element, only if the specified element occur once. Try Yourself
:only-child It is used to select the child of an element if doesn't have any other child. Try Yourself
:optional It is used to select the elements which doesn't have required attribute. Try Yourself
:out-of-range It is used to select the specified element if the value is outside the given range. Try Yourself
:read-only It is used to select the element which has readonly attribute in it. Try Yourself
:read-write It is used to select the element which doesn't have readonly attribute in it. Try Yourself
:required It is used to select the element which has required attribute in it. Try Yourself
:root It is used to select the highest-level "parent" element. It is used to represent <html> element. Try Yourself
::selection It is used to select the content when the selection process is done on it. Try Yourself
:target It is used to select the selected element which has link to another element. Try Yourself
:valid It is used to select the element which are validated successfully. Try Yourself
:visited It is used to select the already visited link. Try Yourself