Simple Selectors

There are many different types of CSS selectors. Here's a cool resource that lists them all. Save it for future reference.

We can split them in:

Simple
Combinator
Pseudo-Class
Pseudo-Elements
Attribute

Simple selectors are the ones that will target the element directly, their id or their class. We can also put the universal selector in this group.

We can use the element tags to apply some css rules. However, bare in mind that, when we use this approach, we'll be targeting all of the DOM elements with the same tag name (all of the paragraphs, h1s, etc.):

IDs

Ids, on the CSS side, are represented by a hash (#), followed by the id name. In the example below, the div has an id equal to introduction. Take a look at how you would achieve the output on the right, by targeting this element using its id:

Classes

Classes, on the CSS side, are represented by a dot (.), followed by the class name. In the example below, the span element, that exists inside of the paragraph (p), has a class called highlight. The same is true for the h1 element. Take a look at how you would apply a background-color to all of the elements that have this class, and what would be the expected output:

Universal Selector

It is represented by an asterisk (*) and whichever rules you apply using the universal selector will be applied to all of the elements on the page, so be very selective with its rules. Here's an example:

* {
  font-family: Arial, Verdana, sans-serif;
}

Grouping

Ideally, you should use the universal selector to set rules like the font-family, or remove margin/paddings (we'll discuss in a couple of pages) of each element, so you start your styling with a clean sheet. HTML elements have their inline display attributes, so it's always good to set them to 0 right at the root of your styling.

We also suggest that you group elements before styling them. So, elements that must look the same, would have the same class, which can then be used in the css to target multiple elements.
Ids should be unique, so not ideal for this. We would want to use an ID when we need to target one specific element on it's own.

##Let's practice some simple selectors!
We will try adding one of each type into our project.
Try the tl;dr instructions using the info you have just read, or if you get stuck, scroll down and use the walkthrough for some hints!

###tl;dr (too long; didn't read)

Add a rule to your css file that targets one of your elements using the element name, and change its colour to something exciting.
Add a class to one of your html elements and target it in your CSS file, try changing the background colour this time.
Add an ID to one of your html elements and target it in your CSS file. Why not try changing the font size to 20px?

Save your file after each one and check to see your changes have worked.

###Walkthrough;

Head to your styles.css file. To target an element directly, we simply put the tag name as the selector, like this:

h2 {
  color: hotpink;
}

Save your file and check your work in the browser.
Now let's try a class. Head back to your html file. Find an element you want to style and add a class like so:
<h3 class=“test-class”>some text</h3>
Remember, this goes inside the tag itself!
Now we can head to our CSS file and target that element using a full stop:

.test-class {
  color: blue;
}

Save and refresh!
Try using an ID to target an element without any help. If you can’t remember how to target an ID, check the info above!

Simple Selectors