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