new update

03 - CSS/what's-the-difference-between-the-"nth-of-type()"-and-"nth-child()"-selectors.md

@@ -0,0 +1,42 @@
+ What's the difference between the "nth-of-type()" and "nth-child()" selectors?
+
+"nth-child()" selects specific number of the child element of the chose "nth". For example of I had the html code: 
+
+<div id="example">
+    <p>Example 1 </p>
+    <p>Example 2 </p>
+    <p>Example 3 </p>
+    <p>Example 4 </p>
+    <p>Example 5 </p>
+    <p>Example 6 </p>
+</div>
+
+and then added the css code of: 
+
+#example :nth-child(3) {
+    background-color: blue;
+}
+
+It would turn the background color of paragraph line "Example 3" blue. But there can be unexpected results when there are multiple types of elements. You may need to combine the :nth-child() pseudo-class with type or class selectors. such as adding the code 'div' before ':nth-child()"
+
+"nth-of-type()" selects elements based on number but only its position within its siblings that have the same element type. For example if I had the html code: 
+
+<div id="example">
+    <p>Example 1 </p>
+    <div>Example 2 </div>
+    <div>Example 3 </div>
+    <p>Example 4 </p>
+    <div>Example 5 </div>
+    <p>Example 6 </p>
+    <div>Example 7 </div>
+    <p>Example 8 </p>
+    <p>Example 9 </p>
+</div>
+
+and then added the css code of: 
+
+#example p:nth-of-type(odd) { 
+    background-color: blue; 
+} 
+
+It would turn the background colors of 'Example 1', 'Example 6' and 'Example 9' to blue because they are the odd numbered paragraphs, even though they are not odd numbered out of all the elements in the id.