HTML and CSS Reference
In-Depth Information
However, the following selector has no effect on the <em> tag, because it's not a direct child:
/* Doesn't work */
blockquote > em {
font-style: normal;
To style the <em > tag in this example, you need to use a descendant selector like this:
/* Works */
blockquote em {
font-style: normal;
Alternatively, chain child selectors like this:
/* Also works */
blockquote>p>em {
font-style: normal;
When elements are nested only one level deep, it's marginally more efficient to use a child selector. Howev-
er, the disadvantage is that your style stops working if changes to the HTml structure result in the target element(s)
being nested at a deeper level. it's best to reserve child selectors for cases where you want to exclude elements at a
deeper level. All browsers except iE 6 support child selectors.
With the help of child selectors, you can apply styles that affect only the direct child of the list item that
currently has focus or is being hovered over. This makes it possible to reveal a hidden submenu only when
hovering over its parent, and hide it again when the cursor moves away. This technique works in all browsers
except IE 6. However, it raises some important accessibility issues, which I'll discuss after showing you how to
style the drop-down menu.
This exercise shows how to style a series of nested unordered lists as a drop-down menu. Each list item
is relatively positioned, so it acts as a containing block for a submenu in a nested list. The submenus are
absolutely positioned and hidden by setting their display property to none . Hovering over a list item that has
a submenu changes the display property of the child list to block , revealing it.
Use menu_begin.html and styles/menu_begin.css in the ch11 folder as your starting point. The finished files
are menu_end.html and styles/menu_end.css.
View the unstyled menu in a browser. it's a series of links in nested unordered lists,
as shown in Figure 11-16 . The top-level list has the iD nav .
Search WWH ::

Custom Search