CSS Selectors Reference
Last Updated Jul 21, 2015, 12:00:06 PM
List of CSS Selectors
CSS selectors are patterns used to select the element(s) you want to style in a webpage. In this chapter we will explore all the major css selectors.
| Selector | Example | description | Video | Try It |
|---|---|---|---|---|
| element | element | Targets a specific element. | Watch GIF | Try It |
| id | #id | Selects unique element with id | Watch GIF | Try It |
| class | .class | Selects all elements what maches the same class name. | Watch GIF | Try It |
| group | h2, h3, p | Selects unique element with id | Watch GIF | Try It |
| :active | a:active | It selects all the active links on a webpage. | Watch GIF | Try It |
| ::after | a:active | It Insert content after every <p>s element. | Watch GIF | Try It |
| ::before | p::before | Insert new content before the content of every <p> element | Watch GIF | Try It |
| :checked | input:checked | Selects every checked <input> element | Try It | |
| :disabled | input:disabled | It Selects every disabled <input> element | Watch GIF | Try It |
| :empty | p:empty | It selects every <p> element that has no children (including text nodes) | Try It | |
| :enabled | input:enabled | It selects every enabled <input> element | Watch GIF | Try It |
| :first-child | p:first-child | It selects every <p> element that is the first child of its parent | Try It | |
| ::first-letter | p::first-letter | It Selects the first letter of every <p> element | Watch GIF | Try It |
| ::first-line | p::first-line | It selects the first line of every <p> element | Watch GIF | Try It |
| :first-of-type | p:first-of-type | It selects every <p> element that is the first <p> element of its parent | Watch GIF | Try It |
| :link | a:link | It Selects all unvisited links | Watch GIF | Try It |
| :not(selector) | :not(p) | It selects every element that is not a <p> element | Try It | |
| :nth-child(n) | p:nth-child(2) | It selects every <p> element that is the second child of its parent | Watch GIF | Try It |
| :nth-last-child(n) | p:nth-last-child(2) | It selects every <p> element that is the second child of its parent, counting from the last child | Try It | |
| :nth-of-type(n) | p:nth-of-type(2) | It Selects every <p> element that is the second element of its parent |
Try It | |
| :only-of-type | p:only-of-type | It selects every <p> element that is the only element of its parent |
Try It | |
| :required | input:required | It selects input elements with the "required" attribute specified | Try It |
Sources and Credits
The source of the content has been referred and updated with Mozilla Foundation and W3C Organization
Last Updated Jul 21, 2015, 12:00:06 PM
