advanced selectors

master
Matt Huntington 8 years ago
parent 2c0176ce11
commit 3b79f6314b

@ -1,6 +1,7 @@
# CSS - Advanced Selectors # CSS - Advanced Selectors
## Lesson Objectives ## Lesson Objectives
1. Explain why we need advanced selectors 1. Explain why we need advanced selectors
1. List advanced selectors 1. List advanced selectors
@ -12,9 +13,11 @@ Advanced selectors help eliminate extra classes. They provide no new functional
### Family Selectors ### Family Selectors
1. * - *
- 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
```html ```html
<div> <div>
<a class="style-me">content</a> <a class="style-me">content</a>
@ -22,9 +25,11 @@ 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>
``` ```
1. > - >
- 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
```html ```html
<ul> <ul>
<li> <li>
@ -34,9 +39,10 @@ Advanced selectors help eliminate extra classes. They provide no new functional
</li> </li>
</ul> </ul>
``` ```
1. ~ - ~
- sibling selector - sibling selector
- only selects subsequent siblings, not preceding siblings - only selects subsequent siblings, not preceding siblings
```html ```html
<h1>Title</h1> <h1>Title</h1>
<p>paragraph</p> <p>paragraph</p>
@ -45,9 +51,10 @@ Advanced selectors help eliminate extra classes. They provide no new functional
</ul> </ul>
<p>paragraph</p> <p>paragraph</p>
``` ```
1. + - +
- immediate sibling selector - immediate sibling selector
- only selects first sibling - only selects first sibling
```html ```html
<h1>Title</h1> <h1>Title</h1>
<p>paragraph</p> <p>paragraph</p>

Loading…
Cancel
Save