advanced selectors

5. Responsive Design and Advanced Selectors/1. ADVANCED_SELECTORS.md

@@ -1,6 +1,7 @@
 # CSS - Advanced Selectors
 
 ## Lesson Objectives
+
 1. Explain why we need advanced selectors
 1. List advanced selectors
 
@@ -12,50 +13,56 @@ Advanced selectors help eliminate extra classes.  They provide no new functional
 
 ### Family Selectors
 
-1. *
+- *
+
 	- selects everything
 	- useful for when you want to style everything.  Can add an optional ancestor for more specificity
-	```html
+
-		<div>
+		```html
-			<a class="style-me">content</a>
+			<div>
-			<a class="style-me">content</a>
+				<a class="style-me">content</a>
-			<span class="style-me">content</span>
+				<a class="style-me">content</a>
-		</div>
+				<span class="style-me">content</span>
-	```
+			</div>
-1. >
+		```
+- >
+
 	- selects an immediate child
 	- if you want to add styling to just a child, but the parent has descendants that are similar to child
-	```html
+
-		<ul>
+		```html
-			<li>
+			<ul>
-				<ul>
+				<li>
-					<li></li>
+					<ul>
-				</ul>
+						<li></li>
-			</li>
+					</ul>
-		</ul>
+				</li>
-	```
+			</ul>
-1. ~
+		```
+- ~
     - sibling selector
 	- only selects subsequent siblings, not preceding siblings
-	```html
+
-		<h1>Title</h1>
+		```html
-		<p>paragraph</p>
+			<h1>Title</h1>
-		<ul>
+			<p>paragraph</p>
-			<li><p>list paragraph</p></li>
+			<ul>
-		</ul>
+				<li><p>list paragraph</p></li>
-		<p>paragraph</p>
+			</ul>
-	```
+			<p>paragraph</p>
-1. +
+		```
+- +
 	- immediate sibling selector
     - only selects first sibling
-	```html
+
-		<h1>Title</h1>
+		```html
-		<p>paragraph</p>
+			<h1>Title</h1>
-		<ul>
+			<p>paragraph</p>
-			<li><p>list paragraph</p></li>
+			<ul>
-		</ul>
+				<li><p>list paragraph</p></li>
-		<p>paragraph</p>
+			</ul>
-	```
+			<p>paragraph</p>
+		```
 
 ### Attribute Selectors