Viewers: in countries Watching now:
In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.
So far, we have discussed how you can use selectors to target elements on the page. All the selectors we've used up to this point rely on something called the DOM, or the Document Object Model. The DOM is simply a structural representation of all the elements on the page. Most of the time it's referred to as a tree, as you can traverse up and down the tree to retrieve elements or the contents. That's basically what a browser does with your selectors. You're instructing it to traverse the DOM and targets the elements that it finds that match your criteria.
Most of the time that's all you really need, but there are times when you're going to need the target elements that either exist outside of the DOM or target, say, the current state of an element. In many cases, elements can change based on user input, or other factors: links can be hovered over, buttons can be clicked and checkboxes checked. So what do we do then? Well, then, we can turn to pseudo-class selectors. Pseudo-class selectors allow us to target elements that lie outside of the DOM, perhaps based on current state or elements that are too specific to be targeted with the simple selectors that we've been using.
Now before we get into using pseudo-class selectors, I want to take a moment to give you a brief overview of the different types, since we won't be covering all pseudo-class selectors in this course. Pseudo-class selectors consist of a colon followed by the selector itself. They are usually preceded by the element that you wish to target, based on its state, and can be combined with other simple selectors as well. Here you see a pseudo-class selector that targets a link when the link is being hovered over by the user, and also an example of a pseudo-class selector being used in a descendent selector--so in this case, a link that's being hovered over inside of an unordered list.
The hover pseudo-class selector that you see here belongs to a group of pseudo-class selectors known as dynamic. Dynamic pseudo-class selectors target elements based on something other than attributes, content, or element type. Usually this refers to something that can change over time or something that's based on user interaction. We will take a closer look at these types in just a moment as we style links based on the current link state. There's also another group of pseudo- class selectors known as UI element state pseudo-class selectors.
That's kind of a mouthful. Well, these can be used to target user interface elements based on whether or not the element is enabled. This group of selectors is relatively new and support really isn't widespread at the current time. However, with the continuing rise of online applications, these styles will continue to grow in importance as implementations in browsers and other user agents are refined. I recommend reading through the specification to learn a little more about them. Now the structural pseudo-class selectors allow you to target elements based on very specialized information within the DOM that simple selectors like classes, IDs, and elements don't allow you to access.
For example, the nth-child selector. Now this one allows you to target elements based on the pattern that they fit into, regarding their sibling elements. Using selectors like these, you can target elements based on whether or not they are the odd- or even-numbered children, whether they are the first or last child of a parent element, and in more patterns. And we are going to explore those in more detail in just a moment. Now, a couple pseudo-class selectors really don't fit into any one category. Those selectors like target and language give you even more specialized targeting capabilities.
As always, I recommend reading the specification carefully regarding pseudo-class selectors and studying what is and what is not currently supported within browsers. Now in most sites, you'll be using pseudo-class selectors a good bit, so making sure you have a firm grasp on how they work is critical to your ability to author efficient styles.
There are currently no FAQs about CSS: Core Concepts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.