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.
Most of the attention directed toward CSS3 has showcased the more flashy features, like web fonts, animations, and gradients. As cool and as important as those features are, I would argue that no feature in CSS3 is as important to designers, than the CSS level 3 selectors module. In this chapter, we'll explore the selectors module and find out how selectors in CSS3 give you an incredible amount of control when targeting elements on our pages.
I would also like to point out that as of this recording, the selectors module has reached to proposed recommendation status and most of these selectors are widely implemented, meaning you should feel free to use them now. The CSS level 3 selectors module defines all selectors, not just the selectors new to CSS3. As such, I want to take a look at some of the more advanced CSS 2.1 selectors as well. There is a good chance you may not have used them before and they will act as a nice introduction into the advances made in the new selectors added with CSS3.
I want to start with the child and sibling selectors, most of which are carried over from the CSS 2.1 specification. These selectors are a bit more specific than descendent selectors and allow us greater control when targeting elements based on their relationship to other elements. Child selectors used the greater than sign to separate two simple selectors. Essentially, you're targeting any element that is a child of the preceding element. In this example, you would be targeting any h1 that was the direct child of a div tag.
This is an important difference when comparing child selectors to descendent selectors, as they limit selected elements to direct children only. There are basically two types of sibling selectors: adjacent and general. As the name suggests, sibling selectors are used to target siblings within the parent elements. The adjacent sibling selector combines two selectors with the plus sign. Both elements are understood to be child elements of the same parent and the target element will be selected only when it directly follows the first element in the selector.
Well, here for example, the selector would target a paragraph only when it directly followed an h1 tag within the same parent. General sibling selectors are new to the CSS level 3 module and allow a broader targeting of sibling elements. The tilde character is used to separate two elements. Both elements are understood to be children of the same parent. And the second element is preceded by the first element. Although it isn't necessary for it to immediately precede it.
Here, for example, every paragraph that follows an h1 within this parent is targeted, even if it doesn't come directly after it. Browser support for child and sibling selectors is pretty widespread and it's fairly safe to assume that most modern browsers support them. So these selectors definitely fall into the ready-to-use-now category. Now that we understand the syntax surrounding the selectors, we'll try them out in our next movie and explore when they're appropriate to use.
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.