ID Selector

• Most specific selector.
• Identified with the # symbol.
• Is the id attribute of the HTML elements.
• IDs are unique!

// Trying to match 

// #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>

Class Selector

• Can be multiple elements.
• Identified with the dot prefix.
• Are the class attribute of the HTML elements. 
• One html element can have multiple classes at the same time.

// Trying to match 

// .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>

Tag Selector

• Can be multiple elements.
• Are the tag name of the HTML elements no extra prefix or sufix.
• Can be too general.

// Trying to match

// 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 Selector

• Can be multiple elements.
• Can be any attribute in a HTML element.
• Identified by the [] brackets.
• Can be very powerful when mixed with regular expressions.
• Ids and Classes are Attributes too!.

// Trying to match

// div[data-modal="open"]

<!-- WILL match -->
<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>

// Trying to match

// h2[rel="external"]


<!-- WILL match -->
<h1 rel="external">Attribute Equals</h1>

[rel="external"]

Attribute Exactly Equals Certain Value

// Trying to match

// h1[rel*="external"]


<!-- WILL match -->
<h1 rel="xxxexternalxxx">Attribute Contains</h1>

[rel*="external"]

Attribute Contains Certain Value Somewhere

// Trying to match

// h1[rel^="external"]


<!-- WILL match -->
<h1 rel="external-link yep">Attribute Begins</h1>

[rel^="external"]

Attribute Begins with Certain Value

// Trying to match

// h1[rel~="external"]


<!-- WILL match -->
<h1 rel="friend external sandwich">Attribute Space Separated</h1>

[rel~="external"]

Attribute is within Space Separated List

// Trying to match

// h1[rel|="friend"]


<!-- WILL match -->
<h1 rel="friend-external-sandwich">Attribute Dash Separated</h1>

<!-- WILL NOT match -->
<h1 rel="friend2-external-sandwich">Attribute Dash Separated</h1>

[rel|="friend"]

Attribute is within Dash Separated List

Positional Selector

• Can be multiple elements.
• Are defined by an ordinal number.
• 1st, 2nd, 3rd, 4th, ..., nth.
• Is a pseudo class selector.
• Needs another selector to work with.

// Trying to match

// :nth-child(2)

<ul>
  <li>nope</li>
  <!-- WILL match -->
  <li>yep, I'm #2</li>
  <li>nope</li>
</ul>

Tester

https://css-tricks.com/examples/nth-child-tester/