HTML and CSS Reference
In-Depth Information
Element Selectors
The first one that I just showed you is an element selector. To use this, simply specify the element type such as
p , h1 , input , ol , div , and so on. HTML5 introduces a large number of new tags that were added primarily with
CSS in mind. These context-specific elements like article , footer , and nav , communicate their purpose more
clearly, and therefore make it more likely that consistent formatting will be applied to all pages. These new
element types are:
article - a stand-alone portion of content such blog entry.
aside - content usually put to one side of the page; typically used for navigation or related
information.
details - used for expandable content that can be hidden or displayed based on user input.
figcaption - used with figure to associate a caption with an image
figure - used to wrap embedded content such as an image or graphic
footer - the page or section footer
header - the page or section header
hgroup - used to group header elements like h1 , h2 , etc.
nav - used to contain a group of links
output - contains output such as the result of a user action
section - used to organize content in to logical sections
summary - usually used in conjunction with one or more details elements
Using Combinators
If you want to apply the same declarations to more than one element type, you can group them like this:
p, h1, h2
{
color:green;
font-size:12px;
}
The comma (“, ”) character serves as a logical OR operation. For example, all elements of type p OR h1 OR
h2 . This is just a special case of a selector combinator. You can also combine selectors to specify certain element
hierarchies. By combining elements with one of the following operators you can create a more complex selector:
, - (e.g. p, h1 ) Selects all p elements as well as all h1 elements.
header p ) Selects the second element when it is inside the first element.
For example, if you want all p elements that are inside a header element, use header p .
he header element does not have to be the immediate parent, just somewhere in node's
parentage.
* - (e.g. header*p ) selects the second element when it is a grandchild or later descendant
of the first element.
> - (e.g. header> p ) Selects the second element when the first element is the immediate parent.
he header> p selector returns all p elements whose parent (immediate) is a header element.
space - (e.g.
 
Search WWH ::




Custom Search