Linking Styles

So far we have managed to keep our selectors quite simple, but now it’s time to kick it up a notch. Before we look at creating linking styles, we need to understand that it is possible to combine selectors. This is really useful for styling a page, and is how most CMS work under the hood.

Combining kinds of selectors

It is possible to combine selectors. These are called compound selectors. The syntax for these is relatively simple. Here are a few examples of useful compounds:

header h1

This CSS rule would apply an <h1> tag which is inside a header tag.

#content a

This CSS would apply to a link <a> inside the content ID.

You can also have compounds that use IDs and classes;

#sidebar .bordertext

This would be a selector that applies to any element within the class of bordertext in a sidebar ID. Another way of saying that: any child element of sidebar with a class of bordertext.

You can even combine selectors into one selector:

#sidebar.bordertext

You’ll see there’s no space between those rules, so what this means is that the selector only applies to an element that has both the ID of sidebar AND the class of bordertext.

This is how that would look in the HTML:

<div id="sidebar" class="bordertext">

So linking styles are just another way of making compounds, but they’re specifically applied to the link <a> tag.

ID and tag-based selectors are the easiest to use because they don’t need extra coding in the HTML, and you can have as many different linking styles as there are boxes in your layout. For example:

nav a

This would apply to a link inside the nav tag.

You could do one for the footer in a similar way:

footer a

And let’s say you wanted a linking style in your sidebar too. In that case, you’d use the ID:

#sidebar a

Those would all create a single linking style for those sections of your layout, but what if you wanted a rollover effect too? You can use a special selector for that called “:hover” that applies as you mouse overtop of a link.

nav a:hover

Note that :hover can be used on all kinds of elements, but for our purposes, it’s the link hover that’s most useful.

Building a button with these selectors

So if you want to build buttons with a simple hover effect you can do so easily with just two selectors. When you’re building them, create the “shape” of the button (padding, margin, text, background color, etc.) using the a selector. The a:hover selector is just for the things you want to see change on the mouseover. (For example, switching background and text colors. But there’s really no limit, you can do whatever you want!)

If you want to have a visited effect, you’ll need to create an additional rule:

a:visited

This selector will tell the browser what to do after a link has been visited. You won’t need this for creating buttons, but you will want it for embedded or contextual links.

Note: these rules have to come in a specific order in the CSS: a, a:visited, a:hover.

Pseudoclass Links

Another option is to create what is called a pseudoclass. This behaves like a class, but only on a link tag. You create a selector that looks like this:

a.linkstyle

So, as we’ve learned already, this compound only applies to a link with the class of “linkstyle”.

<a href="#" class="linkstyle">

If you want to add a hover effect, that goes after the class name. Note: no spaces!

a.linkstyle:hover

These pseduoclasses are useful when you want to have multiple embedded (or contextual) linking styles within the text. Remember, if you have these kinds of links, you should include the visited selector as well. Here are some samples you could copy:

a.linkstyle { }
a.linkstyle:visited { }
a.linkstyle:hover { }

You may also want to play with some of the other effects, such as :active or :focus.