Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

CSS-Tricks Cheat Sheet (DRAFT) by

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Small, Medium, Big screen

small screen
 
@media only screen and (max-w­idth: 40em) { .class {...} #id{...} }
medium screen
 
@media only screen and (min-w­idth: 40.063em) and (max-w­idth: 64em)  { .class {...} #id{...}  }
big screen
no need to specify

Class selectors - Exampl­es&Ex­pla­nation

#header .callout {  }
 
Select all elements with the class name callout that are decendents of the element with an ID of header
 
#heade­r.c­allout { }
 
Select the element which has an ID of header and also a class name of callout
 
#one.two { color: red; }
 
<h1 id="­one­" class=­"­two­"­>This Should Be Red</h­1>
 
.three.four { color: red; }
 
<h1 class=­"­three four">D­ouble Class<­/h1>
 
#header { color: red; }
 #heade­r.o­verride { color: black; } 
The second targets the same element but overrides the color

Pseudo classes

:hover { }
 
p {  
display: none;
     backgr­oun­d-c­olor: yellow;
     padding: 20px; }  
div:hover p {     display: block; }
hover div to show the p element
 

Combin­ators

div p {  }
 
Descendant selector - selects all <p> elements inside <di­v> elements
 
div > p { }
 
Child selector - selects all <p> elements that are immediate children of a <di­v> element
 
div + p { }
 
Adjacent sibling selector -  selects all <p> elements that are placed immedi­ately after <di­v> elements
 
div ~ p { }
 
General sibling selector - selects all <p> elements that are siblings of <di­v> elements