Created
June 6, 2014 04:02
-
-
Save mikeselander/fa1340d28fb6f39af3a7 to your computer and use it in GitHub Desktop.
Basic CSS Selector Cheatsheet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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