Coding: CSS: Selectors
The selector determines which elements a style will affect. For instance, if you want all the heading 1 (h1) elements to be Arial font and 18 pixels high, you'd create a selector that identified these elements.
Read Chapter 9: Defining Selectors by Elizabeth Castro in HTML, XHTML, & CSS, Sixth Edition.
Use the following resources to help you with selectors. A selector can define up to five different criteria: element type or name, context of element, class or id, pseudo-class, attributes and values.
Element Names
When creating your style sheet you normally start with the most common elements such as p, h1, h2, h3.
Example
h3 {color: green;}
Id and Class Attributes
You can give your elements a unique name or one that identifies them as belonging to a specific class. You can then use criteria in a selector to apply formatting to only those elements that have this label.
Use the id attribute to name unique elements. To select elements to format based on their id, type the # (pound sign) and the id name followed by the criteria. If you want to impact a particular element with a class, then use the element before the period such as h2.questions {color: green;}
Use the class attribute to name a group of elements. To select elements to format based on their class, type the . (period) and the class name following by the criteria.
Example
#frog {color: green;}
h1.news {color: red;}
When you're ready to use the id or class attribute in your HTML, you simply name the id or class. To name unique elements, type id="whatever". To name groups of elements, type class="whatever". Insert your own unique word for whatever.
Context
You can identify elements based on their ancestors, their parent, or their sibling.
Example
div#frog p {color: green;}
Parts of an Element
You can also identify a part of an element such as the first letter or first line.
Example
p:first-letter {color: green;}
Link Element States
A very popular formatting option is applying formatting based on the current state. The link elements are associated with the a tag.
Visited indicates links that the visitor has already clicked.
Focus indicates the link is selected and is ready to be activated.
Hover indicates the link is being pointed to.
Active indicates when the link is clicked.
Sample 1 - you can make a special pseudo class for links
Sample 2 - use the hover effect to distinguish small links
Sample 3 - override a class to use several types in one document
Example
a:link {color: red;}
a:visited {color: yellow;}
a:hover {color: blue;}
Groups of Elements
If you want to apply the same style to a group of elements, they can be connected using a comma.
Example
h1, h2, h3 {color: green;}