advanced selectors

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

@@ -20,10 +20,20 @@ Advanced selectors help eliminate extra classes.  They provide no new functional
 
 		```html
 		<div>
-				<a class="style-me">content</a>
-				<a class="style-me">content</a>
-				<span class="style-me">content</span>
+			<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,7 +41,7 @@ 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>
+		<ul id="top-level">
 			<li>
 				<ul>
 					<li></li>
@@ -39,6 +49,11 @@ Advanced selectors help eliminate extra classes.  They provide no new functional
 			</li>
 		</ul>
 		```
+		```css
+		#top-level > li {
+			border: 1px solid red;
+		}
+		```
 - `~`
     - sibling selector
 	- only selects subsequent siblings, not preceding siblings
@@ -51,6 +66,11 @@ Advanced selectors help eliminate extra classes.  They provide no new functional
 		</ul>
 		<p>paragraph</p>
 		```
+		```css
+		ul ~ p {
+			color:red;
+		}
+		```
 - `+`
 	- immediate sibling selector
     - only selects first sibling
@@ -63,6 +83,11 @@ Advanced selectors help eliminate extra classes.  They provide no new functional
 		</ul>
 		<p>paragraph</p>
 		```
+		```css
+		h1 + p {
+			color:red;
+		}
+		```
 
 ### Attribute Selectors