Back to Week 4 page »

CSS Selectors

The following is a list of the most common CSS selectors. There are many, many more, but these are the ones you should know well.

Terminology Review

selector {
  property: value;
}
Selector
The selector is the HTML element that the rule will affect
Property
The property is the actual CSS rule
Value
The value is the value we want for the given property

Type Selectors

The most basic CSS selectors are Type Selectors. That's a fancy name for simply using an HTML element, without the angle braces.

We've used this selector extensively already.

For example, if we wanted to make all paragraphs have green text, we would use the following CSS rule:

p {
   color: green;
}

Descendant Selectors

Match an element that is a descendant of another element.

This uses two separate selectors, separated by a space.

For example, if we wanted all emphasized text in our paragraphs to be red text, we would use the following CSS rule:

p em { 
   color: red;
}

Class Selectors

Match an element that has the specified class attribute.

To match a specific class, start the selector with a period to signify that we are looking for a class attribute. The period is followed by the class attribute value we want to match.

For example, if we wanted all elements with a class of "highlight" to have a different background color, we would use the following CSS rule:

.highlight {
   background-color: #ffcccc;
}

Id Selectors

Match an element that has the specified id attribute.

To match a specific id attribute, start the selector with a pound symbol (#) to signify that we are looking for an id attribute. The hash is followed by the id attribute value we want to match.

Remember, we can only use the same id attribute value once in an HTML page, so the id selector will always only match one element in our document.

For example, if we wanted to add a border to the element with an id of "content", we would use the following CSS rule:

#content {
   border: 2px solid green;
}

Child selectors

Match an element that is an immediate child of another element.

For example, if we wanted all emphasized text in our paragraphs's to have red text, but not emphasized text in other elements, we would use the following CSS rule:

p > em {
   color: red;
}

Adjacent sibling selectors

Match an element that is immediately after another element, but not a child of it.

For example, if we wanted all paragraphs that immediately followed an h4 to have green text, but not other paragraphs, we would use the following CSS rule:

h4 + p {
   color: green;
}

Pseudo Selectors

Anchor elements are special. You can style the <a> element with a Type Selector, but it might not do exactly what you expect. This is because links have different states, that relate to how web viewers interact with them in the browser. The five primary states of a link are: link, visited, focus, hover, active.

Pseudo selectors come in different sizes and shapes. By far the most common pseudo selectors are used to style our links. There are five different pseudo selectors to be used in conjunction with links:

:link
A link that has not been previously visited (visited is defined by the browser history)
:visited
A link that has been visited
:focus
A link that is in a focused state
:hover
A link that the mouse cursor is "hovering" over
:active
A link that is currently being clicked
a:link		{ color: red }
a:visited   { color: blue }
a:focus     { color: pink; outline: 1px dotted pink; }
a:hover     { color: pink }
a:active    { color: lime }

For reasons of browser compatibility, you should always specify the pseudo selectors in this order. An easy way to remember this is by using the mnemonic: "LoVe For Happy Angels".

Note: Touch screen devices do not have a hover state. See Non Hover by Trent Walton for more information regarding this interesting usability quandary.

You can read more about the other types of pseudo selectors on the sitepoint page.

Universal Selector

Matches every element on the page.

For example, if we wanted every element to have a solid 1px wide border, we would use the following CSS rule:

* {
   border: 1px solid blue;
}

For reasons that are likely obvious after the previous example, you should be careful with universal selectors. When might you want to use them?

The answer is, not often. But an example would be to set the margins and padding for all elements on the page to zero. We'll learn a better way to do this shortly.

* { 
   margin: 0;
   padding: 0;
}

Additional Reading

Here are some articles with more information about CSS Selectors.

Back to Week 4 page »