CHAPTER 3 CSS SELECTORS AND INHERITANCEType, Class, and ID Selectors
Problem You want to select elements by type, class, and/or ID so you can style them.^
Solution Apply styles to your chosen class or ID as follows:
Use the type selector to select all elements of a particular type. The type selector is the element’s name
without the less-than and greater-than signs.
Use the class selector to select all elements that you have assigned to a class. The class selector is the
period followed by the name of a class. The class selector is added to the end of a type selector. You can add
it onto the end of the universal selector, , to select all elements in the document that have a matching
class, such as .my-class1. You can also use the class selector all by itself, such as .my-class1, which is a
shortcut for *.my-class1.
Use the ID selector to select all elements in the document assigned to that ID. Each element has one ID,
which should be unique in a document.
Patterns HTML CSS
type { STYLES }
*.class { STYLES }
#id { STYLES }Location These design patterns apply to all elements.^
Tips You can assign multiple classes to an element, by separating them with a space. The class operator selects
all elements with matching classes. For example, I assigned my-class1 and my-class2 to the second and
third paragraphs of the example.
Names of classes and IDs are case-sensitive. They must start with a letter and may contain letters, numbers,
and the hyphen. I recommend always using lowercase names for classes and IDs because a browser cannot
select a class or an element if the case of each letter in the selector does not perfectly match a class name.
For example, the browser will not select
If multiple selectors select the same element, each style from each selector is applied to the element.
Selectors with higher cascade order override the values applied by selectors with a lower cascade order. IDs
override classes, and classes override types. If you apply multiple style sheets to a document, ID selectors
override all classes and types in all style sheets.
In CSS3 type selectors are allowed to have an optional namespace prefix that has been previously
declared. This may be prepended to the element name separated by the namespace separator with a
vertical bar. Here is an example:
@namespace foo url(http://www.example.com); / declaring a namespace /
foo|h1 { color: blue } / matches h1 in the "http://www.example.com" namespace /
foo| { color: yellow } / matches all elements in the "http://www.example.com"
namespace /
|h1 { color: red } / matches all h1 elements, no namespace /
|h1 { color: green } / matches all h1 elements, with or without a namespace /
h1 { color: green } / similar as above/
CSS3 also specifies a “universal selector” in the form of an asterisk, which represents the qualified name of
any element type. It represents any single element in the document tree in any namespace (including those
without a namespace) if no default namespace has been specified for selectors. If a universal selector is not
the only component of a sequence of simple selectors or is immediately followed by a pseudo-element,
then the may be omitted and the universal selector’s presence implied.
[hreflang|=en] and [hreflang|=en] are equivalent,
.warning and .warning are equivalent,
#myid and #myid are equivalent