MENU


Child Selectors

p:first-child:every <p> that is the first child
p:last-child:every <p> that is the last child
p:only-child:every <p> that is the only child
p:nth-child(3):every <p> that is the third child
p:nth-child(2n): every <p> child at even locations
p:nth-child(n+3):nth-child(-n+5): the 3rd to 5th <p>s
p:nth-child(-2n + 9): the 1st, 3rd, 5th, 7th, 9th <p>s
p:nth-child(even): every <p> child at even locations
p:nth-child(odd): every <p> child at odd locations
p:nth-last-child(3): every <p> that is the third last child
p:first-of-type: every first <p> of its parent
p:last-of-type: every last <p> of its parent
p:only-of-type: every <p> that is the only <p> element of its parent
p:nth-of-type(3): every third <p> of its parent
p:nth-of-type(3n+1): every <p> of its parent at multiple-of-three locations with 1 offset
p:nth-last-of-type(3): every third last <p> of its parent
p:empty: every <p> that has no children

Fixing the width of <body> prevents the elements from shifting around as the browser window is resized.

Setting the 'height' of <body> and <html> to 100% allows a <div> inside to extend 100% vertically over the entire page.

'!important' prevents a property from being overridden if it is declared again (o). (overriding inline {font-weight:100;} here)
RESETRUNFULL
<!DOCTYPE html><html><head>
   <style type="text/css">
      html, body {height: 100%}
      p:nth-child(2){text-decoration:underline;}
      p:nth-of-type(2){font-weight:bold !important;}
   </style>
</head><body style="width:1440px; margin:0px;">
   <div style="background:orange; height:100%;">
      <div><p>Hello World!</p>
           <div>Hello World!</div>
           <p style="font-weight:100">Hello World!</p></div>
      <div><p>Hello World!</p>
           <p>Hello World!</p>
           <p>Hello World!</p></div>
   </div>
</body></html>