CSS - Advanced Selectors

Lesson Objectives

Advanced selectors help eliminate extra classes. They provide no new functionality, but they make your code cleaner

*

useful for when you want to style everything. Can add an optional ancestor for more specificity

<div>
	<a>content</a>
	<a>content</a>
	<span>content</span>
</div>
<section>
	<a>content</a>
	<a>content</a>
	<span>content</span>
</section>

div * {
	padding: 10px
}

>

if you want to add styling to just a child, but the parent has descendants that are similar to child

<ul id="top-level">
	<li>
		<ul>
			<li></li>
		</ul>
	</li>
</ul>

#top-level > li {
	border: 1px solid red;
}

~

only selects subsequent siblings, not preceding siblings

<h1>Title</h1>
<p>paragraph</p>
<ul>
	<li><p>list paragraph</p></li>
</ul>
<p>paragraph</p>

ul ~ p {
	color:red;
}

+

only selects first sibling

<h1>Title</h1>
<p>paragraph</p>
<ul>
	<li><p>list paragraph</p></li>
</ul>
<p>paragraph</p>

h1 + p {
	color:red;
}

You can test for any attribute, not just id/class

Here's our example: <a href='http://www.google.com'>link</a>

[attr]
- test to see if an attribute exists
- a[href]
[attr='foo']
- test an exact match
- a[href="http://www.google.com"]
[attr^='foo']
- test the start of the attribute
- a[href^="http"]
[attr$='foo']
- test the end of the attribute
- a[href$="com"]
[attr*='foo']
- test a substring
- a[href*="w.goo"]
[attr~='foo']
- test an exact word separated by space
- <a data-values="value1 value2">link</a>
- a[data-values~="value2"]
[attr|='foo']
- test the start of a hyphenated word
- <html lang="en-US">
- html[lang|="en"]