advanced selectors

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

@@ -19,11 +19,21 @@ Advanced selectors help eliminate extra classes.  They provide no new functional
 	- useful for when you want to style everything.  Can add an optional ancestor for more specificity
 
 		```html
-			<div>
-				<a class="style-me">content</a>
-				<a class="style-me">content</a>
-				<span class="style-me">content</span>
-			</div>
+		<div>
+			<a>content</a>
+			<a>content</a>
+			<span>content</span>
+		</div>
+		<section>
+			<a>content</a>
+			<a>content</a>
+			<span>content</span>
+		</section>
+		```
+		```css
+		div * {
+			padding: 10px
+		}
 		```
 - `>`
 
@@ -31,37 +41,52 @@ Advanced selectors help eliminate extra classes.  They provide no new functional
 	- if you want to add styling to just a child, but the parent has descendants that are similar to child
 
 		```html
-			<ul>
-				<li>
-					<ul>
-						<li></li>
-					</ul>
-				</li>
-			</ul>
+		<ul id="top-level">
+			<li>
+				<ul>
+					<li></li>
+				</ul>
+			</li>
+		</ul>
+		```
+		```css
+		#top-level > li {
+			border: 1px solid red;
+		}
 		```
 - `~`
     - sibling selector
 	- only selects subsequent siblings, not preceding siblings
 
 		```html
-			<h1>Title</h1>
-			<p>paragraph</p>
-			<ul>
-				<li><p>list paragraph</p></li>
-			</ul>
-			<p>paragraph</p>
+		<h1>Title</h1>
+		<p>paragraph</p>
+		<ul>
+			<li><p>list paragraph</p></li>
+		</ul>
+		<p>paragraph</p>
+		```
+		```css
+		ul ~ p {
+			color:red;
+		}
 		```
 - `+`
 	- immediate sibling selector
     - only selects first sibling
 
 		```html
-			<h1>Title</h1>
-			<p>paragraph</p>
-			<ul>
-				<li><p>list paragraph</p></li>
-			</ul>
-			<p>paragraph</p>
+		<h1>Title</h1>
+		<p>paragraph</p>
+		<ul>
+			<li><p>list paragraph</p></li>
+		</ul>
+		<p>paragraph</p>
+		```
+		```css
+		h1 + p {
+			color:red;
+		}
 		```
 
 ### Attribute Selectors