Selectors

 


  There's this text.



  And then there's this.

                

Don't use # (id) selectors,
Always use . (class) selectors.

 Big text 
 Blue text 


  Big, Blue text.
And centered too!

                

Multiple classes on one element.

 Item outside. 


  

    Item one level inside.
  

  

    

      Item two levels inside.
    
  

                

Child selector: .a > .b

 Item outside. 


  

    Item one level inside.
  

  

    

      Item two levels inside.
    
  

                

Descendant selector: .a .b

Normal div element


  With some attribute value



  With the specific attribute



  Contains attribute value

  in space-separated form

                

Attribute Selector: .a[attribute=value]

  
First and Red
  
Even
  
Blue and Third
  
Big and Even

                

Pseudo Selectors:
:nth-child, :nth-of-type, :hover, etc.

  
First
  
Second
  
Third
  
Fourth (and last)

                

Sibling selector: .a + .b

When you're fighting Internet Explorer (< 9)

Colors

 steelblue 
 # 46 82 B4 
 rgb(70, 130, 180) 
 rgb(27%, 51%, 71%) 
                

#8CF translates to #88CCFF

 steelblue

 rgb(70, 130, 180)

 rgba(70, 130, 180, 0.5)

                

Opacity of an element ≠
Translucence of its background

Specificity

 This is fine. 


  But what color would this be?


 And this? 
                

#unique-id greater than
div.class-name greater than
.class-name

Cascade

  Red or Blue?



  Blue or Red?



  Definitely Red

                

Order of assignment is important,
not usage.
Avoid !important at all costs.

Display Type

Some text on one line,
and some more right after.

Text in div,
doesn't keep on the same line.

Hey! This div
is weird!
 

And look at this span,
it broke!
                

block makes a box,
inline runs like text.

Hide things

  This won't show.


  This only takes space.


  This hides right under your nose.

                

display: none removes from layout,

visibility: hidden
renders only dimensions,

opacity: 0 just makes it transparent.

z-index

  

    cape
  
  

    superman
  
  

    tights
  

                

Default stacking order is
order of appearance in HTML.

  
 cape
  
  
 superman
  



  
 tights
  

                

Each z-index creates
a new stacking context

Default Box Model

  Box with 100% width takes more than 100%

                

width means width of content,
padding, margin, border excluded.

It was never right.

The Right Box Model

  Now, width calculation includes padding & border

                

Available in all browsers today.

Vertical Margins

  

    

      

        

          Banana



        
      
    
  

                

Adjacent vertical margins collapse
and leave only the larger one.

  

    

      

        

          Banana



        
      
    
  

                

Unless you set padding or border

position: relative

Einstein a bit down and left out.


Einstein right
 where he belongs.


Einstein can't fall.
                

Setting position: relative moves
element relative to its normal position.

position: absolute

Newton matches Einstein.


Newton back to start.


Newton goes all the way down.
                

absolute moves element relative to
the closest ancestor with position.

Transitions

Try setting rotateY() on the hut directly.

You can put the transition on all as well.

It's a bird, it's a plane...

preserve-3d becomes important
when actually dealing with 3d.