You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
2.1 KiB
121 lines
2.1 KiB
# CSS - Advanced Selectors
|
|
|
|
## Lesson Objectives
|
|
|
|
1. Explain why we need advanced selectors
|
|
1. List advanced selectors
|
|
|
|
## Explain why we need advanced selectors
|
|
|
|
Advanced selectors help eliminate extra classes. They provide no new functionality, but they make your code cleaner
|
|
|
|
## List advanced selectors
|
|
|
|
### Family Selectors
|
|
|
|
- `*`
|
|
|
|
- selects everything
|
|
- useful for when you want to style everything. Can add an optional ancestor for more specificity
|
|
|
|
```html
|
|
<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
|
|
}
|
|
```
|
|
- `>`
|
|
|
|
- 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 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>
|
|
```
|
|
```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>
|
|
```
|
|
```css
|
|
h1 + p {
|
|
color:red;
|
|
}
|
|
```
|
|
|
|
### Attribute Selectors
|
|
|
|
You can test for any attribute, not just id/class
|
|
|
|
Here's our example: `<a href='http://www.google.com'>link</a>`
|
|
|
|
1. [attr]
|
|
- test to see if an attribute exists
|
|
- `a[href]`
|
|
1. [attr='foo']
|
|
- test an exact match
|
|
- `a[href="http://www.google.com"]`
|
|
1. [attr^='foo']
|
|
- test the start of the attribute
|
|
- `a[href^="http"]`
|
|
1. [attr$='foo']
|
|
- test the end of the attribute
|
|
- `a[href$="com"]`
|
|
1. [attr*='foo']
|
|
- test a substring
|
|
- `a[href*="w.goo"]`
|
|
1. [attr~='foo']
|
|
- test an exact word separated by space
|
|
- `<a data-values="value1 value2">link</a>`
|
|
- `a[data-values~="value2"]`
|
|
1. [attr|='foo']
|
|
- test the start of a hyphenated word
|
|
- `<html lang="en-US">`
|
|
- `html[lang|="en"]`
|