Here's what that HTML file would be like
<html lang="en">
<head>
<title>We're learning selectors!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="yay">Yay</h1>
<body>
</html>
Id selectors
css
#happy-cake {
}
<!-- WILL match -->
<div id="happy-cake"></div>
<!-- WILL match -->
<aside id="happy-cake"></aside>
<!-- Will NOT match -->
<div id="sad-cake">Wrong ID!</div>
<!-- Will NOT match -->
<div class="happy-cake">That's not an ID!</div>
ID selectors are the most powerful type of selector in terms of CSS specificity. Meaning that they beat out other types of selectors and the styles defined within win. That sounds good, but that's typically considered bad, because it's nice to have lower-specificity selectors that are easier to override when needed.
Class selectors
css
.module{
}
<!-- WILL match -->
<div class="module"></div>
<!-- WILL match -->
<aside class="country module iceland"></aside>
<!-- Will NOT match -->
<div class=".module">The dot is for CSS, not HTML</div>
<!-- Will NOT match -->
<div class="bigmodule">Wrong class</div>
Class selectors are your friend. They are probably the most useful and versatile selectors out there. In part because they are well supported in all browsers. In part because you can add multiple classes (just separated by a space) on HTML elements. In part because there are JavaScript things you can do specifically for manipulating classes.
Tag selectors
css
h2{
}
<!-- WILL match -->
<h2>Hi, Mom</h2>
<main>
<div>
<!-- WILL match -->
<h2>Anywhere</h2>
</div>
</main>
<!-- Will NOT match -->
<div class="h2">Wrong tag, can't trick it</div>
<!-- Will NOT match -->
<h2class="yolo">Make sure that tag has a space after it!</h2>
Attribute selectors
css
}
<div data-modal="open"></div>
<!-- WILL match -->
<aside class='closed' data-modal='open'></aside>
<!-- Will NOT match -->
<div data-modal="false">Wrong value</div>
<!-- Will NOT match -->
<div data-modal>No value</div>
<!-- Will NOT match -->
<div data-modal-open>Wrong attribute</div>
Positional selectors
css
}
<ul>
<li>nope</li>
<!-- WILL match -->
<li>yep, I'm #2</li>
<li>nope</li>
</ul>
Other pseudo selectors
css
}
<div></div>
<!-- WILL match -->
<aside data-blah><!-- nothin' --></aside>
<!-- Will NOT match -->
<div> </div>
<!-- Will NOT match -->
<div>
</div>
Leveling up
css
/* Selects elements with BOTH of those classes */
}
#site-footer::after {
/* Adds content after an element with that ID */
}
section[data-open] {
/* Selects only section elements if they have this attribute */
}
.module > h2 {
/* Select h2 elements that are direct children of an element with that class */
}
h2 + p {
/* Select p elements that are directly following an h2 element */
}
li ~ li {
/* Select li elements that are siblings (and following) another li element. */
}
