Skip to content

Instantly share code, notes, and snippets.

@mikeselander
Created June 6, 2014 04:02
Show Gist options
  • Save mikeselander/fa1340d28fb6f39af3a7 to your computer and use it in GitHub Desktop.
Save mikeselander/fa1340d28fb6f39af3a7 to your computer and use it in GitHub Desktop.
Basic CSS Selector Cheatsheet
/* Basic Selectors */
#name /* <div id='name'> */
.name{} /* <div class='name'> */
.parent.name{} /* <div class='parent name'> */
.parent .child{} /* Child Element <div class='parent'> <div class='child'> */
.parent > .child{} /* Direct Child Element ONLY (grandchildren will be ignored) */
.one + .two{} /* Directly Adjoining Elements <div class='one'></div> <div class='two'></div> */
.one ~ .two{} /* Any Following Elements */
/* dynamic selectors */
.element:first-of-type{}
.element:last-of-type{}
.element:rifst-child{}
.element:last-child{}
.element:nth-child(1){}
.element:nth-child(2n){}
.element:nth-child(2n-3){}
.element:nth-last-child(2){}
ul:nth-of-type(3)
/* Pseudo Elements */
.element:before{}
.element:after{}
.element::first-letter{}
.element::first-line{}
/* http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment