tailieunhanh - CSS Mastery- P2

CSS Mastery- P2: The human race is a naturally inquisitive species. We just love tinkering with things. When I recently bought a new iMac, I had it to bits within seconds, before I’d even read the instruction manual. We enjoy working things out ourselves and creating our own mental models of how we think things behave. We muddle through and only turn to the manual when something goes wrong or defies our expectations. | GETTING YOUR STYLES TO HIT THE TARGET Pseudo-classes There are instances where you may want to style an element based on something other than the structure of the document for instance the state of a link or form element. This can be done using a pseudo-class selector. makes all unvisited links blue a link color blue makes all visited links green a visited color green makes links red when hovered or activated. focus is added for keyboard support a hover a focus a active color red makes table rows red when hovered over tr hover background-color red makes input elements yellow when focus is applied inputfocus background-color yellow link and visited are known as link pseudo-classes and can only be applied to anchor elements. hover active and focus are known as dynamic pseudo-classes and can theoretically be applied to any element. Most modern browsers support this functionality. Unsurprisingly IE 6 only pays attention to the active and hover pseudo-classes when applied to an anchor link and ignores focus completely. IE7 supports hover on arbitrary elements but ignores active and focus. Last it s worth pointing out that pseudo-classes can be strung together to create more complex behaviors such as styling the hover effect on visited links different from those on unvisited links. makes all visited linkes olive on hover a visited hover color olive The universal selector The universal selector is possibly one of the most powerful and least used of all the selectors. The universal selector acts like a wild card matching all the available elements. Like wild cards in other languages the universal selector is denoted by an asterisk. The universal selector is often used to style every element on a page. For instance you can remove the default browser padding and margin on every element using the following rule 27 CHAPTER 2 padding 0 margin 0 When combined with other selectors the universal selector can be used to style all the descendants of a particular element or skip a .