HTML and CSS Reference
In-Depth Information
You can also prefix a selector with :not to return all the elements not selected. For example, :not(header+p)
selects all elements except p tags that immediately follow a header tag.
Understanding Unions
You can also combine complex selectors in a logical OR relationship by separating them with commas. For
example, the p, h1, h2 selector I showed earlier in this chapter is an example of a union. It will return all
elements that satisfy any of the included selectors. Each selector can be any of the more complex types. This is
also a valid selector:
header+p, .book, a:visited
It will return all elements that are either a p element that immediately follows a header element, an element
with the topic class , or a visited a element.
For a definitive list of available selectors see the article at
http://www.w3schools.com/cssref/css_selectors.asp .
Tip
Using CSS Properties
All of these selectors are provided so you can specify the appropriate elements that you want to apply the desired
style properties to. This is the real meat of CSS. There are literally hundreds of CSS properties available and I can't
describe them all here. I will demonstrate many of the newer, more useful features in the rest of this chapter.
A really good reference of all CSS properties can be found at http://www.w3schools.com/cssref/default.asp .
Using Vendor Prefixes
Oh the joys of living on the edge! As with other areas of HTML5, browser vendors will have varying support for the
CSS specifications. In many cases, however, these vendors implement new properties before they become part of
the official recommendation. In fact, much of what is being included in the CSS3 specification has already been
available from one or more browsers.
When a browser vendor adds a new feature that is not part of the CSS3 recommendation, the property
is given a vendor-specific prefix to indicate this is a non-standard feature. If this becomes part of the
recommendation, the prefix is eventually dropped. To take advantage of some of the newer properties you may
need to use the vendor-specific properties, and since you want your page to work on all vendors, you'll need to
add all of them. For example, to specify the border-radius, in addition to the standard border-radius property,
you may need to setall of the vendor-specific properties as well like this:
header
{
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
-ms-border-radius: 25px;
border-radius: 25px;
}
The most common prefixes are listed in Table 4-1 . There are others but this list will cover that vast majority of
browsers.
 
 
Search WWH ::




Custom Search