CSS Selectors

This lesson is part of the Web Programming 1 Course.

Type Selectors

A type selector targets all elements on the page that match the tag name (many programmers refer to them as 'tag' selectors, but the technical term is 'type'). If you wanted to set the text color and font-type for all h1 elements on a page you could do it like this:

h1{ 
    color:blue; font-family: helvetica; 
}

If you wanted to set the font size for all paragraphs on a page you might do this:

p{ 
    font-size: 18px; 
}

This would set text inside of each p tag to 18 pixels.

Class Selectors

Another type of selector that is commonly used is a class selector. Class selectors target all elements whose class attribute value match the selector. In your CSS code, class selectors must start with a period, for example:

.warning{ 
    color: red; 
}

The selector in the rule set above targets any HTML elements that have a class attribute set to a value of 'warning', so the following elements would display their text as red:

<h3 class="warning">DANGER!</h3>
<p class="warning">
    This is a warning...
</p>

You can make up your own names for class selectors (I decided to go with 'warning' in this example). But the important thing to note is that in order for an HTML element to have the rules applied, the value of its class attribute must match the selector. This is why they are referred to as class selectors.

ID Selectors

An id selector will target THE element on the page whose id attribute value matches the selector. ID selectors must begin with a hash tag symbol (#), like so:

#employee-list{ 
    background-color: gray; 
}

This rule set will set the background color for the following element:

<ul id="employee-list">
    <li>Bob Smith</li>
    <li>Betty Barton</li>
    <li>Tommy Jones</li>
</ul>

Note that the value of the id attribute (in the ul element) matches the id selector in the CSS code. Also note that when you use an id selector, you are targeting one, and only one, element on the page (remember that IDs are supposed to be unique, so no two elements on a page should have the same value set for the id attribute).

Mixed Selectors

You can combine different selector types, which gives you more control over which elements will be targeted by a rule set. Consider this example, which targets H2 elements that have a class attribute set to 'promo':

h2.promo{ 
    color: yellow; 
}

This mixed selector is a combination of a tag selector (h2) and a class selector (.promo). The result is that the rules will be applied strictly to H2 elements that have a class attribute set to a value of 'promo'.

Mixed selectors can become quite complicated, but they do give you fine grained control over how CSS styles will be applied throughout a web page.

I want to point out a very subtle difference in the syntax used between these two rule sets, see if you can spot it:

p.promo{ 
    color: orange; 
}

p .promo{ 
    color: green; 
}

Did you notice the space between div and .warning in the second rule set? The selector in the first rule set targets p elements that have a class attribute value set to 'warning'. Therefore, this p element would have the rules applied to it:

<p class="warning">BEWARE!</p>

The selector in the second rule set targets any element nested within an p that has its class attribute set to 'warning', like so:

<p>
  This is a <span class="warning">VERY IMPORTANT</span> sentence! 
</p>

So, a single space makes a difference when used within a selector!

Here's another mixed selector that is quite common:

ul li{ 
    color: green;
    font-family: verdana;
    font-size: 22px  
}

This mixed selector consists of two type selectors, with a space in between them. This will target li elements that are nested inside of ul elements. So, this comes in handy when you want li elements to look different depending on whether or not they are used within an ol or ul element.

To summarize, if you see a space used in a CSS selector, it means that you are targeting the one on the right side, but it must be nested within the one on the left side.

Grouped Selectors

You can use multiple selectors, separated by commas, to apply a rule set to more than one target. Consider this example:

b, a, div.promo{
  color: red;
  font-size: 22px
}

Notice the comma in the selector. This is actually three different selectors that are grouped together (via the comma), and the rules will be applied to the following elements:

1. All b elements
2. All a elements
3. All div elements whose class attribute is set to 'promo'

The nice thing about grouped selectors is that you don't have to repeat your code. Without grouped selectors, we would have to create 3 rule sets that duplicated rules, like so:

b{
  color: red;
  font-size: 22px
}

a{
  color: red;
  font-size: 22px
}

div.promo{
  color: red;
  font-size: 22px
}

Pseudo Selectors

The last type of selector we'll discuss are pseudo selectors, which target elements that are in a certain state (they meet a certain condition). For example, if you wanted to target a but only when the mouse cursor is over them (in the 'hover' state), you could do it like so:

a:hover{ 
    background-color: green;
}

This example would change the background color of a elements to green, but only when the mouse is hovering over them (when they are in the 'hover' state). This is how you can achieve rollover effects for links in your page. Note the syntax, pseudo selectors include a colon which is followed by the state that you wish to target. We won't be using many of them in this class, but if you'd like to know more about them, here is a reference on pseudo selectors

Questions

1. What is a type selector?
2. What is a class selector, and what is the syntax for using one with a rule set?
3. What is an id selector, and what is the syntax for using one with a rule set?
4. How many elements are you targeting when you create a rule set that uses an id selector?
5. What is the difference between these two selectors:

• div .promo
• div.promo

1. How do you group selectors (what is the syntax for grouping selectors)?