lmoura
2/1/2018 - 10:17 PM

Basic CSS selectors

CSS Cheet Sheet

/* Element – for all elements with this TAG*/ 
li { 
  
} 
 
/* class – for a group of elements with the same caracteristics */ 
.hello { 
  
} 
 
/* id – for just one particular element */ 
#name { 
  
} 
  
/* Star – for all elements in a page. DO NOT use except for troubleshoot*/ 
  
* { 
    border: 1px solid lightgrey; 
} 
  
/* Descendant Selector: all 'a' that are inside 'li' */ 
  
li a { 
    color: red; 
} 
  
/* Adjacent Selector: all 'ul' that came after 'h4' */ 
  
h4 + ul { 
    border: 4px solid red; 
} 
  
  
/* Attribute Selector: selects a tag by a specific atribute of the tag. It could be a checkbox that is checked */ 
  
a[href="http://www.google.com"] { 
    background: blue; 
} 

input[type="checkbox"] {
    background: blue;
}
  
/*nth of type*/ 
  
li:nth-of-type(odd){ 
    background: purple; 
} 

li:nth-of-type(3){ 
    background: purple; 
}