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.