CSS Selectors
Posted by admin at September 9, 2019
The CSS Selectors are used to select the elements and style.
There are three basic selectors of the css that are similar to the JavaScript Selectors Id , Class and Tag
All CSS Selectors are given bellow with there description
| Class Selector ( . ) | Selects the elements with . sign. You can define multiple classes in a element |
| # | Selects the element with id |
| * | Selects all elements |
| [ attribute ] | Selects all elements with attribute name |
| [attribute=value] | Selects all elements with attribute =”value” |
| [attribute~=value] | Selects all elements with a attribute containing the word “value” |
| [attribute|=value] | Selects all elements with attribute starting with “value” |
| [attribute^=value] | Selects every element whose attribute value begins with “value” |
| [attribute$=value] | Selects every element whose attribute value ends with “value” |
| [attribute*=value] | Selects every element whose attribute value contains the substring “value” |
| :active | Selects the active link |
| ::after | Insert something after the content of each selected element |
| ::before | Insert something before the content of each selected element |
| :checked | Selects every checked element |
| :default | Selects the default element |
| :disabled | Selects every disabled element |
| :empty | Selects every element that has no children (including text nodes) |
| :enabled | Selects every enabled element |
| :first-child | Selects every element that is the first child of its parent |
| ::first-letter | Selects the first letter of every selected element |
| ::first-line | Selects the first line of every selected element |
| :first-of-type | Selects every selected element that is the first element of its parent |
| :focus | Selects the selected element which has focus |
| :hover | Selects elements on mouse over |
| :in-range | Selects elements with a value within a specified range |
| :indeterminate | Selects elements that are in an indeterminate state |
| :invalid | Selects all elements with an invalid value |
| :lang(language) | Selects every element with a lang attribute equal to “value” (Italian) |
| :last-child | Selects every selected element that is the last child of its parent |
| :last-of-type | Selects every selected element that is the last <p> element of its parent |
| :link | Selects all unvisited links |
| :not(selector) | Selects every element that is not a element |
| :nth-child(n) | Selects every selected element that is the second child of its parent |
| :nth-last-child(n) | Selects every selected element that is the second child of its parent, counting from the last child |
| :nth-last-of-type(n) | Selects every selected element that is the second <p> element of its parent, counting from the last child |
| :nth-of-type(n) | Selects every selected element that is the second selected element of its parent |
| :only-of-type | Selects every element that is the only element of its parent |
| :only-child | Selects every element that is the only child of its parent |
| :optional | Selects elements with no “required” attribute |
| :out-of-range | Selects elements with a value outside a specified range |
| ::placeholder | Selects elements with placeholder text |
| :read-only | Selects elements with the “readonly” attribute specified |
| :read-write | Selects elements with the “readonly” attribute NOT specified |
| :required | Selects elements with the “required” attribute specified |
| :root | Selects the document’s root element |
| ::selection | Selects the portion of an element that is selected by a user |
| :target | Selects the current active element |
| :valid | Selects all input elements with a valid value |
| :visited | Selects all visited links |
Comments