|
|
|
@ -13,7 +13,7 @@ Advanced selectors help eliminate extra classes. They provide no new functional
|
|
|
|
|
|
|
|
|
|
|
|
### Family Selectors
|
|
|
|
### Family Selectors
|
|
|
|
|
|
|
|
|
|
|
|
- *
|
|
|
|
- `*`
|
|
|
|
|
|
|
|
|
|
|
|
- selects everything
|
|
|
|
- selects everything
|
|
|
|
- useful for when you want to style everything. Can add an optional ancestor for more specificity
|
|
|
|
- useful for when you want to style everything. Can add an optional ancestor for more specificity
|
|
|
|
@ -25,7 +25,7 @@ Advanced selectors help eliminate extra classes. They provide no new functional
|
|
|
|
<span class="style-me">content</span>
|
|
|
|
<span class="style-me">content</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
```
|
|
|
|
```
|
|
|
|
- >
|
|
|
|
- `>`
|
|
|
|
|
|
|
|
|
|
|
|
- selects an immediate child
|
|
|
|
- selects an immediate child
|
|
|
|
- if you want to add styling to just a child, but the parent has descendants that are similar to child
|
|
|
|
- if you want to add styling to just a child, but the parent has descendants that are similar to child
|
|
|
|
@ -39,7 +39,7 @@ Advanced selectors help eliminate extra classes. They provide no new functional
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
```
|
|
|
|
```
|
|
|
|
- ~
|
|
|
|
- `~`
|
|
|
|
- sibling selector
|
|
|
|
- sibling selector
|
|
|
|
- only selects subsequent siblings, not preceding siblings
|
|
|
|
- only selects subsequent siblings, not preceding siblings
|
|
|
|
|
|
|
|
|
|
|
|
@ -51,7 +51,7 @@ Advanced selectors help eliminate extra classes. They provide no new functional
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
<p>paragraph</p>
|
|
|
|
<p>paragraph</p>
|
|
|
|
```
|
|
|
|
```
|
|
|
|
- +
|
|
|
|
- `+`
|
|
|
|
- immediate sibling selector
|
|
|
|
- immediate sibling selector
|
|
|
|
- only selects first sibling
|
|
|
|
- only selects first sibling
|
|
|
|
|
|
|
|
|
|
|
|
|
