Last post we looked at element, id, and class selectors. There are many, many more. In this post, we’re going to look at five of the more common ones. For more reference, you can find a really good list of 30 selectors here. Contrary to what the headline of the article says, you don’t really need to memorize all thirty. The ones you use most often you will tend to memorize. But you do need to be aware of the others and be able to look them up when needed. Also, although that article is titled The 30 CSS Selectors You Must Memorize, be aware that there are a lot more than 30.
I’m going to take the Retro Computer page I used in an earlier post and add a couple more unordered lists. So we have an <h1> tag, three <h4> tags, and three unordered lists. Let’s also add a link in each of the lists as well as another link after the <h1> tag.
We’re going to need a stylesheet, so I’m going to call it “selector.css” and link to it in the head of our HTML.
Now that we have our basic HTML, let’s get started.
The Star Selector
The star selector selects everything on the page. To use it, we simply type an asterisk (*). Let’s say we wanted to give everything on our page a 2-pixel black border. We would do it like this:
A black border is now around everything. You may not use this a whole lot, but it comes in handy sometimes.
The descendant selector takes two or more tags. The last tag is the tag that is selected. To demonstrate this, let’s make the links in our lists red and leave the other link the default color. Since we only want to style the anchor tags that are part of a list we would write:
Because the <a> tag is also nested in an <li> tag, we could also do it this way:
Either way, only the anchor tags (links) that are part of the list get styled. Our link at the top doesn’t since it’s not part of any list.
The adjacent selector is like the descendant selector in that it takes more than 1 tag. The difference is that a descendant selector has to be nested inside the opening and closing tags of the first tag listed. In our example above, our <a> tag is between the <ul></ul> and <li></li>. We say that the <a> tag is a grand-child of the <ul> tag and a child of the <li> tag. It is a descendant of both tags.
The adjacent selector selects the tag immediately following the first tag listed that is NOT a descendant of that tag. The way we write it is similar to a descendant selector, only we put a “+” sign between the tags.
Let’s give a blue 1px border around all of our lists that follow an <h4> tag.
Notice that in this example, we have to use the <ul> tag. The <li> tag is not adjacent to the <h4> tag. It is actually a child of the <ul> tag. The output in the browser looks like this:
What do you think would happen if we made our second <h4> tag an <h5> tag?
Let’s find out.
Since our middle list no longer follows an <h4> tag, it doesn’t get a border.
The attribute selector allows us to style a tag by the value of one of its attributes. To do this, we would write our tag, and then in brackets put the attribute and the value that we went to select. For example, let’s say we wanted to make our link to the Commodore website white with a blue background.
Here we are telling the browser to style only anchor tags that have an href attribute with a value of “http://www.commodore.ca”. All the other anchor tags won’t get that particular styling.
An nth-of-type selector can do two things. First, if you provide a number, it will style every nth of a tag in a given group. Let’s say we want every second <li> tag to have background color of yellow. We write it like this:
Don’t mistake this with selecting every second or every other <li>. Using nth-of-type(2) selects every second item in the group. If we copy and paste some extra list items in one of our lists we’ll see that nth-of-type(2) doesn’t select every other item.
There is a way to use nth-of-type to select every other item, which is the second thing it does. Instead of a number in the parenthesis, you can use “odd” or “even” to select every other item.
Notice our link in the first list? We had changed it to blue, then we told it in our nth-of-type selector to be yellow. So why is it still blue? We’ll get into that in the next post.