css

Multiple Selectors

As you've seen, it's possible to nest HTML elements inside one another, like so:

<div> <div> <p>I like tacos!</p>
 
So what if you want to grab <p>s that are inside two <div>s, and not all <p>s?
You select those in the CSS tab like this:

div div p{
css stuff
}

One selector to rule them all

There's also a very special selector you can use to apply CSS styling to every element on the page: the * selector. For example, if you type
 
* { border: 2px solid black; }
 
You'll create a two-pixel wide solid black border around every element on the HTML page.


  text-decoration: underline;

Even finer control

You've learned about class selectors. Now it's time to learn about pseudo-class selectors.
A pseudo-class selector is a way of accessing HTML items that aren't part of the document tree (remember the tree structure we talked about earlier?).

 For instance, it's very easy to see where a link is in the tree. But where would you find information about whether a link had been clicked on or not? It isn't there!
Pseudo-class selectors let us style these kinds of changes in our HTML document.

 For example, we saw we could change a link's text-decoration property to make it something other than blue and underlined. Using pseudo selectors, you can control the appearance of unvisited and visited links—even links the user is hovering over but hasn't clicked!

The CSS syntax for pseudo selectors is

selector:pseudo-class_selector { property: value; }
 
It's just that little extra colon (:).

Links

There are a number of useful pseudo-class selectors for links, including:

a:link: An unvisited link.
a:visited: A visited link.
a:hover: A link you're hovering your mouse over.

Let's try a few!