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