Now it is time to take a deep breath, and concentrate a little. I really don't believe that cascading style sheets are hard to master, but they can be a little tricky. In a few short minutes, we'll cover what I think can be the hardest part of style sheets to "get": selectors.
You'll probably find the constant repetition a little tedious, but I do want to reiterate what a selector does.
A selector identifies elements on an HTML page. Browsers use selectors to determine which elements on a page are affected by a statement.
Now, we saw in the previous lesson that selectors can identify HTML elements, such as paragraphs, the body, and so on. In fact, selectors can identify any html element, but they can do a lot more than that. We'll take a look at the different types of selector, then concentrate on each type, what it does, and how to use it. You're now really entering the reference part of this guide.
The specification organizes and groups the different selectors according to their more theoretical characteristics. We've reorganized them according to how they are generally used. The different types of selectors we separate out are
- type selectors
- class selectors
- ID selectors
- descendant selectors
- link pseudo class selectors
- pseudo element selectors
- selector groups
- dynamic pseudo class selectors
- language pseudo class selectors
- child selectors
- first child selectors
- adjacent selectors
- attribute selectors
For each type of selector we ask
- what they do
- how they are formed - their syntax
- why you might use them
- how well they are supported in various browsers