added optimize selectors

Author: khan4019

css.html

@@ -308,15 +308,15 @@ <h2>6. display vs visibility</h2>
 </div>
 <div id="http_request">
   <h2>7. specificity </h2>
-  <p><strong>Question:</strong> What is specificity</p>
+  <p><strong>Question:</strong> What is specificity? How do u calculate specificity?</p>
   <p><strong>Answer:</strong> is a process of determining which css rule will be applied to an element. it actually determines which rules will take precedence. </p>
   <p>inline style usually wins then ID then class value (or pseudo-class or attribute selector), unversal selector (*) has no specificity.</p>
   <p>ref: <a href="http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/">css specificity: things you need to know</a>, <a href="http://www.standardista.com/css3/css-specificity/">specifishity</a>, <a href="http://specificity.keegan.st/">specificiyt calculator</a></p>
 </div>
 
 <div id="mark">
   <h2>8. box model</h2>
-  <p><strong>Question:</strong> What is css box model?</p>
+  <p><strong>Question:</strong> Why you should care aobut css box model?</p>
   <p><strong>Answer:</strong> everything in a web page is a box where you can control size, position, background, etc. Each box/content area is optionally surrounded by padding, border and margin. When you set height and widht of an element, you set content height and width</p>
   <p>ref: <a href="http://www.w3.org/TR/CSS21/box.html">W3: box model</a>, <a href="http://css-tricks.com/the-css-box-model/">css box model</a></p>
   <div>
@@ -365,10 +365,9 @@ <h2>10. transition</h2>
 </div>
 <div id="svg_canvas">
   <h2>11. overflow</h2>
-  <p><strong>Question:</strong> Describe Overflow</p>
-  <p><strong>Answer:</strong> overflow property deals with the content if content size exceeds the allocated size for the content. You can make extra content visible, hidden, scroll or auto (viewport default behavior).</p>
   <p><strong>Question:</strong> Does overflow: hidden create a new block formatting context?</p>
-  <p><strong>Answer:</strong> yes</p>
+  <p><strong>Answer:</strong> yes</p>  
+  <p><strong>Extra:</strong> overflow property deals with the content if content size exceeds the allocated size for the content. You can make extra content visible, hidden, scroll or auto (viewport default behavior).</p>  
   <div>
     <button id = "overflow" type="button" class="toggleExample btn btn-primary">show example</button>
     <div id="overflowExample" class="hide">        
@@ -425,9 +424,11 @@ <h4>pseudo elements</h4>
   <p>ref: <a href="http://nicolasgallagher.com/an-introduction-to-css-pseudo-element-hacks/">intro to css pseudo element</a>, <a href="http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/">:before :after</a>, <a href="http://css-tricks.com/css-content/">css content</a>, <a href="http://www.w3.org/TR/CSS21/generate.html">W3: generate content</a></p>
 </div>
 <div id="something">
-  <h2>14. text effect</h2>
-  <p><strong></strong></p>
-  <p><strong></strong></p>
+  <h2>14. optimize selector</h2>
+  <p><strong>Question:</strong> How do you optimize css selectors?</p>
+  <p><strong>Answer: </strong> This is very open and depend on what you are trying to achieve. If i order selectors interms of render speed it would be like id, class, tag, siblings, child, descendent, universal, attribute, pseudo. Speed of ID and class is very close. However your code should be readable, maintainable and DRY along with highly performant.</p>
+  <p>The best practices in general are: avoid universal selectors, don't repeat yourself, remove redundant selectors, be as specific as possible, and keep learning.</p>
+  <p>ref: <a href="http://realityonweb.com/cascading-style-sheet-css/performance-improvement-by-writing-efficient-css-selector/">Efficient CSS selectors</a></p>
 </div>
 <div id="filter">
   <h2>15. filter</h2>