Selector Reference
Next ❯Examples
Selectors are being used to select elements you want/wish to design using css properties
| Selectors | Used |
|---|---|
| * | To select all elements |
| element | To select specific type of elements |
| #idName | To select element with a specific 'id' name |
| .className | To select all elements with a specific 'class' name |
| .className.classNameN | To select all elements with a specific 'multiclass' names |
| element, element | To select all specific group of elements |
| descendant selector [space] | To select all specific child, grand-child, grand-grandchild and so on, of a specified element |
| child selector [>] | To select all specific direct child of a specified element |
| adjacent sibling selector [+] | To select all elements that are placed immediately after a specified element |
| general sibling selector [~] | To select all elements that are siblings (sharing same parent) of a specified element |
| [attribute] | To select all elements having specified attribute |
| [attribute="value"] | To select all elements having specified attribute with specified value |
| [attribute|="value"] | To select all elements having specified attribute with specified value equal to or followed by a hyphen(-) |
| [attribute~="value"] | To select all elements having specified attribute containing a specified value |
| [attribute^="value"] | To select all elements having specified attribute begins with specified value |
| [attribute$="value"] | To select all elements having specified attribute ends with specified value |
| [attribute*="value"] | To select all elements having specified attribute which contains substring as specified value |
| ::after | To insert content after a specified element |
| ::before | To insert content before a specified element |
| ::first-letter | To select first-letter of a specified element |
| ::first-line | To select first-line of a specified element |
| ::placeholder | To select the placeholder value of a specified element |
| ::selection | To select the portion selected by a user of a specified element |
| ::focus-within | |
| ::marker | |
| :active | To select active elements |
| :checked | To select checked input element |
| :disabled | To select disabled element |
| :empty | To select element that has no children & no text |
| :enabled | To select enabled element |
| :focus | To select input element that has focus |
| :hover | To select the element when user mouse over them |
| :invalid | To select input element having invalid value |
| :link | To select unvisited links |
| :optional | To select input element which are not required |
| :required | To select input element which are required |
| :root | To select the document's root element |
| :target | To select the current active target element |
| :valid | To select input element having valid value |
| :visited | To select visited links |
| :in-range | To select input element having value within a specified range |
| :out-of-range | To select input element having value outside a specified range |
| :read-only | To select input element which are read-only |
| :read-write | To select input element which are not read-only |
| :is(sp_selector) | |
| :lang(language) | To select element with a "lang" attribute with specified value |
| :not(sp_selector) | To select element which is not having specific-selector |
| :has(sp_selector) | To select parent element which has having specific-selector as its child |
| :where(sp_selector) | |
| :first-child | To select element that are the first child of its parent |
| :first-of-type | To select element that are the first of its type, of its parent |
| :last-child | To select element that are the last child of its parent |
| :last-of-type | To select element that are the last of its type, of its parent |
| :only-child | To select element that are the only child of its parent |
| :only-of-type | To select element that are the only child of its type, of its parent |
| :nth-child(n) | To select element that are the nth child of its parent |
| :nth-of-type(n) | To select element that are the nth child of its type, of its parent |
| :nth-last-child(n) | To select element that are the nth child of its parent from last |
| :nth-last-of-type(n) | To select element that are the nth child of its type, of its parent from last |
❮ Prev Function Reference
Next ❯Examples
So,