CSS Selectors
You are Here:
CSS Selectors
CSS selectors define the elements to which a set of CSS rules apply.
The following table provides a list of all CSS selectors.
| Selector | Quick Look | Explanation | Example |
|---|---|---|---|
| * | * | Selects all elements | Run |
| element | h2 | Select all <h2> elements | Run |
| element,element | h2, p | Selects all <h2> elements and all <p> elements | Run |
| element element | div p | Selects all <p> elements inside <div> elements | Run |
| element > element | div > kbd | Selects only <kbd> that are direct children of <div> | Run |
| element + element | h2 + p | Selects all <p> elements that are placed immediately after <h2> elements | Run |
| element ~ element | h2 ~ p | Selects all <p> elements that are placed after <h2> elements | Run |
| .class | .point | Selects all element with class name 'point' i.e) class="point" | Run |
| .class.class | .point.myClass | Selects all element with both class '.point' and '.myClass'. | Run |
| .class .class | .point .myClass | Selects all elements with a class name '.myClass' inside the element with a class name '.point' | Run |
| #id | #point | Selects an element with id name 'point' i.e) id="point" | Run |
| [attribute] | [target] | Selects all elements with a target attribute | Run |
| [attribute=value] | [target="_self"] | Selects all elements with target="_self" | Run |
| [attribute~=value] | [title~=fruit] | Selects all elements with a title attribute containing the word "fruit" | Run |
| [attribute|=value] | [title|=fruit] | Selects all elements with a title attribute value starting with "fruit-" | Run |
| [attribute^=value] | [title^=fruit] | Selects all elements with a title attribute value starting with "fruit" | Run |
| [attribute$=value] | [title$=fruit] | Selects all elements with a title attribute value ending with "fruit" | Run |
| [attribute*=value] | [title*=fruit] | Selects all elements with a title attribute value contains the substring of "fruit" | Run |
| :link | a:link | Selects all unvisited links | Run |
| :visited | a:visited | Selects all visited links | Run |
| :active | a:active | Selects all active links | Run |
| :hover | a:hover | Selects links on mouse over | Run |
| :focus | input:focus | Selects the input with focus | Run |
| :valid | input:valid | Selects all input elements with a valid value | Run |
| :invalid | input:invalid | Selects all input elements with an invalid value | Run |
| :required | input:required | Selects input elements with the "required" attribute specified | Run |
| :optional | input:optional | Selects input elements with no "required" attribute | Run |
| :read-write | input:read-write | Selects input elements whose value can be edited | Run |
| :read-only | input:read-only | Selects input elements whose value CANNOT be edited | Run |
| :in-range | input:in-range | Selects input elements with a value within a specified range | Run |
| :out-of-range | input:out-of-range | Selects input elements with a value outside a specified range | Run |
| :enabled | input:enabled | Selects all enabled <input> element | Run |
| :disabled | input:disabled | Selects all disabled <input> element | Run |
| :default | input:default | Selects all default <input> element | Run |
| :checked | input:checked | Selects all checked <input> element | Run |
| ::placeholder | input::placeholder | Selects input elements with placeholder text | Run |
| :indeterminate | input:indeterminate | Selects input elements that are in an indeterminate state | Run |
| :target | #section1:target | Selects the target element with an id matching the URL's fragment. | Run |
| :root | :root | Selects the root element of a tree representing the document | Run |
| :lang(languageCode) | p:lang(zh-Hans) | Selects all <p> element with a lang attribute equal to "zh-Hans" Chinese (Simplified) | Run |
| :empty | p:empty | Selects all empty <p> element | Run |
| ::before | a::before | Insert something before the link of each <a> element | Run |
| ::after | a::after | Insert something after the link of each <a> element | Run |
| ::first-letter | p::first-letter | Selects the first letter of every <p> element | Run |
| ::first-line | p::first-line | Selects the first line of every <p> element | Run |
| ::selection | ::selection | Selects the portion of an element that is selected by a user | Run |
| :first-child | p:first-child | Selects every <p> element that is the first child of its parent | Run |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first element of its type among a group of sibling elements | Run |
| :not(selector) | :not(p) | Selects all element that is not a <p> element | Run |
| :nth-child(n) | p:nth-child(3) | Selects every <p> element that is the third child of its parent | Run |
| :nth-last-child(n) | P:nth-last-child(3) | Selects every <p> element that is the third child of its parent, counting from the last child | Run |
| :nth-last-of-type(n) | p:nth-last-of-type(3) | Selects every <p> element that is the third <p> element of its parent, counting from the last child | Run |
| :nth-of-type(n) | p:nth-of-type(3) | Selects all <p> element that is the third <p> element of its parent | Run |
| :only-of-type | p:only-of-type | Selects all <p> element that is the only <p> element of its parent | Run |
| :only-child | p:only-child | Selects all <p> element that is the only child of its parent | Run |
| :last-child | p:last-child | Selects all <p> element that is the last child of its parent | Run |
| :last-of-type | p:last-of-type | Selects all <p> element that is the last <p> element of its parent | Run |
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
