Tham khảo tài liệu 'creating applications with mozilla-chapter 4. css in mozilla applications-p2', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | Chapter 4. CSS in Mozilla Applications-P2 . Pseudoclass selectors Another feature of CSS-2 that Mozilla makes extensive use of is the pseudoclass. In CSS pseudoclasses are used to represent different states for elements that are manipulated by the user such as buttons. The states -represented by pseudoclasses such as active focus and hover -change when the user interacts with an element. The pseudoclasses actually correspond to events on the interface elements. The character is used to add these pseudoclasses in the CSS notation forwardButton hover list-style-image url chrome navigator skin The pseudoclass is often appended to another style. Since specific CSS style rules inherit from more general rules see the section Section later in this chapter for more information about this inheritance the example above picks up any styles defined for the button with the id of forwardButton and any class-based information as well as the basic CSS for a button but substitutes whatever image is used with this special GIF that represents a button being moused or hovered over. In Mozilla s Modern skin the pseudoclasses work collectively to give buttons their appearance and behavior. Each of the following button images in Figure 4-3 is associated with a different pseudoclass or attribute as we discuss in the next section . As soon as the pseudoclass is changed by user interaction . the user hovers the mouse over the button the state changes and the effect is one of seamless transition. Figure 4-3. The different states for buttons in the Modern theme . Element relation selectors Contextual subgroups -- elements appearing within other elements such as italicized text within a p element or a body in HTML -- can be grouped in CSS but this is an extremely inefficient way to style XUL. CSS2 also provides ways to group elements for styling based on their relationship in the object model. Table 4-1 lists these relational selectors. Table 4-1. .
