148 CHAPTER 4 Getting started with CSS3
removed from a hyperlink if it has an ancestor that is a list item, the list item has an ancestor
that is an ordered list, and the ordered list has an ancestor that is a division.
div ol li a {
text-decoration: none;
}In large HTML documents, using descendant selectors can cause performance problems
due to the amount of searching required. Try to implement a selector that is more specific,
such as the child selector that’s discussed next.Using child selectors
You might want to change the style of elements only if the elements are direct children of
another element. For example, you might want to remove the underline from hyperlinks if
they are children of a list item. You can do this by specifying a parent element, followed by
a greater-than symbol (>), and then specifying the child element, as shown in the following
example.
li > a {
text-decoration: none;
}This example removes the underline from hyperlinks that are children of a list item, but it
will not remove the underline of grandchildren or distant descendants. You can specify many
child levels to provide a path to the element you wish to style. The following demonstrates
multiple child levels; the underline is removed from a hyperlink if it has a parent that is a list
item, the list item has a parent that is an ordered list, and the ordered list has a parent that is
a division.
div > ol > li > a {
text-decoration: none;
}Using pseudo-class and pseudo-element selectors
Styles are generally attached to an element based on locating the element in the document
object model (DOM) tree. Although this usually works fine, sometimes you want to apply a
style to something more granular than an element. How do you assign a style to the first line
of a paragraph? How do you assign a style to a hyperlink that has been visited?
To access information that is either outside the DOM tree or difficult to access in the DOM
tree, you can use pseudo classes and pseudo elements.
Pseudo classes classify elements based on something other than name, attributes, or
content and, usually, something that cannot be deduced from the DOM tree. Exceptions to
the rule are :first-child, which can be deduced from the DOM tree, and :lang(), which can
sometimes be deduced from the DOM tree. You can use the pseudo classes anywhere in your
selector chain to help you locate elements when the identified state is true. You can also useKey
Te rms