1. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 9: Defining Selectors

2. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Objectives Create selectors for CSS style rules. Select elements by name, class, id, context, pseudo- class, pseudo-element, attributes, and values. Select element based on ancestor or parent element. Differentiate pseudo-class from pseudo-element. Select a first-child or last-child element to format. Select the first line or first letter of an element. Format links based on their current states. Specify groups of elements.

3. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Defining Selectors Selector is the part of a CSS style rule that determines which elements will receive formatting. –Simplest selectors format all elements of a given type. –More complex selectors apply formatting rules to elements based on class, id, context, state, etc.

4. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Constructing Selectors A selector can define five different criteria for choosing elements to format: –The type or name of the element. –The context in which the element is found. –The class or id of an element. –The pseudo-class or pseudo-element of an element. –Whether or not an element has certain attributes and values. Selectors can include any combination of these criteria in order to pinpoint desired elements.

5. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Selecting Elements by Name Type selector: Choosing elements to format based on the element’s name.

6. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Select Elements to Format Based on their Type Type selector, where selector is the name of the desired type of element, without any attributes. Type {. Type the styles you’d like to apply to the selected element, expressed in property: value pairs. Type } to finish your style rule.

7. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Selecting Elements by Class or ID You can apply formatting to only those elements that are labeled with a class or an id.

8. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Select Elements to Format Based on their Class or ID To select elements to format based on their class: –Type. (a period). –With no intervening space, immediately type classname. classname identifies the class to which you’d like to apply the styles. To select elements to format based on their ID: –Type # (a hash, or pound sign). –With no intervening space, immediately type id. id uniquely identifies the element to which you’d like to apply the styles.

9. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Class Selectors vs. ID Selectors Use class selectors instead of id selectors. –You can reuse class selectors. Two issues that id selectors introduce: –Associated styles can’t be reused on other elements. id may appear on only one element in a page. Leads to repeating styles, rather than sharing them via a class. –ids are far more specific than class selectors. Overriding an id’s style requires writing an even more specific CSS rule. Makes CSS longer and more complicated than necessary. Some like ids because you know at a glance if an element is unique.

10. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Selecting Elements by Context In CSS, you can pinpoint elements depending on their ancestors, their parent, or their siblings. An ancestor is any element that contains the desired element, the descendant. –True no matter how many generations separate them. –Each indentation in the code represents a generation. A parent is an element that directly contains another element, known as a child.

11. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Select an Element to Format Based on its Ancestor Type ancestor. –Ancestor is the selector for the element that contains the element you wish to format. Type a space. (This is critical.) If necessary, repeat first two steps for each successive generation of ancestors. Type descendant. –Descendant is the selector for the element you wish to format.

12. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Descendent and Child Combinators Descendant combinator is a selector based on an element’s ancestor. Child combinators allow you to define a rule for an immediate descendant (a child) of a parent element.

13. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Select an Element to Format Based on its Parent Type parent. –Parent is the selector for the element that directly contains the element you wish to format. Type > (the greater than sign). If necessary, repeat first two steps for each successive generation of parents. Type child. –Child is the selector for the element you wish to format.

14. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Select a First Child Element to Format Optionally, type parent. –Parent is the selector for the desired element’s parent. –If you included a parent in the first step, type a space followed by > followed by another space. Optionally, type the selector that represents the first child you want to style. Type :first-child.

15. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Selecting an Element to Format Based on an Adjacent Sibling Sibling elements are elements of any kind that are children of the same parent. Adjacent siblings are elements that are next to each other directly, meaning no other sibling sits between them. An adjacent sibling combinator allows you to target a sibling element that is preceded immediately by a sibling you specify.

16. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Select an Element to Format Based on an Adjacent Sibling Type sibling –Sibling is selector for the element that directly precedes the desired element within the same parent element. Type + (a plus sign). If necessary, repeat first two steps for each successive sibling. Type element –Element is the selector for the element you wish to format.

17. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE :first-child Pseudo-Class and Pseudo-Selector :first-child pseudo-class selects only the first child of an element. :last-child pseudo-class selects only the last child of an element. Only chooses the first or last child of an element, not the first instance of an element that is a child. To select the first or last child element: –Option: Type selector that represents the first child or last child you want to style. Do not follow it with a space. –Type :first-child or :last-child, as desired.

18. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Selecting the First Letter or First Line of an Element :first-letter pseudo-element selects and applies formatting to just the first letter of an element. –No telling which words will be affected by first-line until the page is viewed in the browser. :first-line pseudo-element selects and applies formatting to just the first line of an element.

19. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Select the First Letter or First Line of an Element To select the first letter of an element: –Type element. Element is the selector for the element’s first letter. –Type :first-letter to select the first letter of the element. To select the first line of an element: –Type element. Element is the selector for the element’s first line. –Type :first-line to select the entire first line of the element.

20. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Pseudo-Elements, Pseudo- Classes, and CSS3’s Syntax Pseudo-element syntax adds double colon instead of single colon. –:first-line is ::first-line and :first-letter is ::first-letter. –Distinguishes the pseudo-elements from pseudo-classes. Pseudo-elements represent content that is part of another element. It doesn’t exist as an element in the HTML. –::first-line, ::first-letter, ::before, ::after Pseudo-class does apply to an HTML element. –:first-child, :link, and :hover

21. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Selecting Links Based on Their State Pseudo-classes apply formatting to links based on their current state. To select links to format based on their state: –Type a (the name of the element for links). –Type : (a colon). –To change link’s appearance, type: link for links that haven’t yet been activated or pointed to. visited to change links that have been activated. focus, if link was selected via keyboard and is ready to activate. hover to change the appearance of links when pointed to. active to change the appearance of links when activated.

22. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Formatted Links Based on Current State HoverFocus

23. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Selecting Elements Based on Attributes Apply formatting to those elements that have a given attribute or attribute value. –Square brackets enclose the desired attribute and any desired value.

24. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Select Elements to Format Based On Their Attributes Type element. Type [attribute. Optionally, do one of the following: –Type ="value" Attribute’s value must equal for its element to be selected. –Type ~="value” Exact value that attribute’s value must contain for its element to be selected. –Type |="value” Must be equal to or begin with value.

25. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Select Elements to Format Based On Their Attributes Optionally, do one of the following: –Type ^="value” Must begin with value as either a full word or substring. –Type $="value” Must end with value as either a full word or substring. –Type *="value” Must contain at least one instance of the value substring. Type ].

26. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Specifying Groups of Elements Apply the same style rules to more than one element: –Reiterate the rules for each element. –Combine selectors and apply the rules in one fell swoop. To apply styles to groups of elements: –Type selector1 Selector1 is the first element affected by the style rule. –Type, (a comma). –Type selector2 Selector2 is the next tag affected by the style rule. –Repeat steps for each additional element.

27. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Combining Selectors Combine selectors to pinpoint elements for formatting. Only combine selectors when it makes sense. Only make style rules as specific as necessary.

28. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE More Selectors in CSS3 CSS3 adds a lot of new selectors to your toolbox. Most of the new ones are pseudo-classes, some of which are fairly complex, but also powerful as a result. Browser support for new selectors is solid, except IE. –IE didn’t begin supporting most of the new CSS3 selectors (particularly pseudo-classes and pseudo-elements) until IE9.