HTML and CSS Reference
In-Depth Information
instead. You'll either be left with a class that no longer accurately describes it, or you will need to change every
instance of the class name in your HTML markup.
Class names must also adhere to the following rules:
•
No spaces are permitted.
-
) and underscore (
•
The only punctuation characters permitted are the hyphen (
).
•
The name cannot begin with a number or a hyphen followed by a number.
■
if you're using a language other than English, you can also use accented characters in class names, as long
as your pages are encoded as UTF-8. in fact, you can also use Chinese characters or other Asian scripts. When using
accented characters or other scripts in an external style sheet, put
@charset "utf-8";
on the first line of the style
sheet to indicate that it uses UTF-8 encoding.
Tip
ID Selectors
An
ID
selector
applies styles to elements that have the equivalent
id
attribute in their opening HTML tag. Unlike
classes, which can be applied to multiple elements in the same page, IDs must be unique within a page. It's OK to
apply the same ID on different pages, as long as it's used only once on each page.
The selector is created by prefixing the ID with the hash or pound sign (
#
). For example,
#sidebar
applies to
the element that has
id="sidebar"
in its opening tag. The rules for naming IDs are the same as for class names.
Pseudo-classes
A
pseudo-class
doesn't rely on a
class
attribute in the HTML markup, but is applied automatically by the browser
depending on the position of the element or its interactive state. The pseudo-classes listed in Table
2-1
apply
mainly to links and form elements.
Pseudo-elements
Like a pseudo-class, a
pseudo-element
is not identified as such by HTML markup. It applies styles to content
based on its position in the HTML hierarchy. The most widely supported pseudo-elements are
:first-letter
This applies a style to the first letter of the first line inside a block-level
element, such as a paragraph, as long as nothing else precedes it.
:first-line
This applies a style to the first line of text in a block-level element. The
length expands and contracts dynamically if the text is rewrapped.
■
The Css3 selectors specification prefixes pseudo-elements with two colons instead of one.
so,
:first-letter
becomes
::first-letter
and
:first-line
becomes
::first-line
. The specification says brows-
ers
must
accept the single-colon prefix for
:first-letter
and
:first-line
, as well as for
:before
and
:after
,
which are covered in
Chapters 13
and
15
. iE 8 and earlier don't understand the double-colon prefix, so you need use
the single-colon versions to avoid styles breaking in older browsers.
Note
