Understanding CSS Selectors

css thumbnailWe have seen that CSS is a list of rules that tell our browser how to display the HTML, and we have looked at how rules are formed. Let’s look in more detail now at selectors.
In this lesson we learn about one of the main parts of a CSS rule: CSS selectors.

Use the buttons below to navigate through the lesson

img0
img1
img2
img3
img4
img5
img6
img7
img8
img9
img10
img11
img12
img13
img14
img15
img16
img17
img18



Remember, a selector is the part of a CSS rule that goes outside of the curly braces “{” and “}”. This tells the browser which elements the rule acts upon.

CSS1

For example a selector a applies to ALL <a> tags. The selector html applies to all <html> tags.

What about this selector that is in our example?

.important

Remember when we learned about classes and ids earlier in the course? If not, you should go and review the lesson “Class, ID and <div> and <span> in HTML” which came in the last part of the course.

Just in case, here’s a reminder. Class and id are both attributes we can put on our HTML tags. We put a class on any tags we want to share particular CSS rules, and we put an ID on any tags we want to be unique.

For example:

<h1 id=”mainHeading”> We only want ONE main heading, so we give this tag a unique name. We only have ONE element with any ID on a page.

<li class=”important”> We might want lots of elements to be marked as ‘important’ so we make a class called important and apply it to LOTS of elements.

To put a CSS selector via ID we use the “#” symbol, and for a class we use the “.” symbol.

So our rule .important applies to any element with a class of “important”.

If we wanted to apply a rule to only one element, then we give that element an ID, e.g. id=”myElement” and then create a rule for it:

#myElement { … }

What if we had a lot of elements that we had marked with a class, but we only wanted some of them to have a particular rule? For example, imagine this HTML:

<li class=”important”>Some list item</li>
<li>Another list item</li>
<a class=”important”>Here’s a link!</a>

We don’t want to change the way our ‘important’ things appear everywhere, but we do want our link to have something extra, maybe be in bold.

We can do this by combining parts of our selectors. We can specify BOTH a type of element and a class, like this:

a.important { font-weight:bold; }

This means that this rule only applies to elements <a> that have a class “important”.

Similarly, we could use an ID in the same way:

a#myUniqueLink { font-weight:bold; }

Of course, since there should only be ONE id #myUniqueLink on the page then we can have the same effect without the “a”.

Inherited Selectors

What about the very long selectors we have in our example CSS file? Look at this one:

nav ul li a { color: white; }

This specifies FOUR tags.

When we list tags like this, we are saying that we only want this rule to apply to tags that are inside the preceding tag. So we would translate our rule as saying “apply this rule to any <a> tag that is inside an <li> that is inside a <ul> that is inside a <nav>”.

So only links inside our <nav> get colored white!

This means we can have different rules for different parts of the page, like this:

#mainSection a { color: orange; }
#otherSection a { color: green; }

Now any <a> tags inside the tag with ID #mainSection will appear orange, while any <a> tags inside the tag with ID #otherSection will appear green!

Pseudo Selectors

Finally there are some selectors called ‘pseudo selectors’. These apply to elements that are in certain states. For example:

a:visited { color:purple; }
a:hover { color: orange; }

This kind of selector is mostly seen with the <a> tag. Remember, <a> is a link. Links can be visited or unvisited. Often websites show you a different colored link when you click it – that is achieved using the a:visited pseudoselector. Now when you click a link on our page, it shows as purple so you know you’ve already been to it.

Similarly, :hover allows you to change an element when your mouse hovers over it – so we get a nice visual effect on our links by changing their color when we hover them.

Selector Specificity

This is a complex topic, but it’s important to understand how different rules apply. Remember the golden rule is:

The most specific rule always wins

For example:

<p id=”someParagraph” class=”superSpecial”>What colour is this text?</p>
<style>

#someParagraph { color: red; }
.superSpecial { color: blue; }

</style>

What colour will our paragraph be?

It has BOTH a class and an ID. And one tells it to be red, and the other tells it to be blue.

Since the most specific rule always wins, and an ID is more specific than a class (because you can only have ONE ID) we know that the #someParagraph rule will “win” and it will be red.

Similarly, any rule that specifies a type of element is more specific than one that does not:

p.superSpecial { color: yellow; }
.superSpecial { color: green; }

In this case the colour will be yellow because the first rule is more specific: it only applies to <p> elements whereas the second rule applies to any element with the class .superSpecial.

It can be very difficult to understand specificity – the best way is to practice and experiment with your own website. We want to give you the ability to start experimenting for yourself so you can learn by experience!