Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
It's easy at first to overlook the new structural selectors in CSS3. At first glance, they look rather secure and frankly they aren't getting the amount of press that features such as gradients, transitions, and rounded corners are. However, I want to make a rather bold statement here. Structural selectors are more likely to change the way you write your CSS than any other addition to CSS3. So what are structural selectors? Well, they are pseudo-class selectors that allow you to select elements on the page based on how they fit into the Document Object Model tree without the use of attributes or labels like classes or IDs.
Think about the implications of that for a moment. Structural selectors allow you to traverse the document object and target elements based on their relationship to each other. That is amazingly powerful and if used correctly can dramatically increase the efficiency of our code by reducing the need for non-semantic markup dedicated to styling. Let's take a quick look at these pseudo- class selectors before breaking out and exploring them in more detail individually. Now first up is the root structural pseudo-classes selector.
The root pseudo-class selector always refers to the documents route element. In HTML, this would be the HTML element. The empty pseudo-class selector allows you to target any empty elements of a specific type. This is a great way of accounting for margins of empty paragraphs or adding a styling identifier for debugging pages. Now first-child and last-child includes the only CSS2 structural selector as first-child was introduced in CSS2. Now as you would expect, the first- child selector targets an element that is the first-child of another element and the last-child targets the last-child of a specific element.
First of type and last of type allow you to target first and last elements of a parent element by their type. Now this is a bit more flexible than first and last-child, as you can target elements that aren't necessarily the first or last elements within their parent, just the first and last of their type. Only-child and only-of-type allow you to target child elements when they are the only elements with a parent. Only-child will target any element with a parent when it is the only child element, regardless of its type.
Only-of-type allows you to target a specific type of child element when it is the only one of its type within the parent. Now there's an important note here. Both of these selectors will produce similar results to any of the last- child or last-of-type selectors. However, these selectors have a lower specificity and will be overwritten by those other structural selectors. That's a really important note. Finally, I want to take a look at nth-type selectors. These are amazingly powerful selectors that allow you to target multiple child elements based on an argument passed into the selector.
As you can see there are four variations of nth-type selectors. Most related to selectors we've explored earlier. Since the syntax for nth-type selectors is a bit specialized, we will examine it in its own movie in just a moment. Support for structural selectors like most CSS3 selectors is fairly widespread. However, I want to point out the lack of support for these selectors in Internet Explorer. Since they allow for such efficient targeting, it's tempting to use them now. However, if you're going to change the way you write selectors based on their ability to traverse the DOM, you will need do account for Internet Explorer.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.