Section 2: The Anatomy of a Class Selector
The example image below displays the type selector code that was used in a previous example. Note that the selector itself is simply: h1 which correlates the to <h1> HTML tag.
A class selector differs from a type selector in that it first begins with a period [ . ] immediately followed by a class selector name (a word or words listed one after the other without a space between).
Class Selector Names
Creating appropriately formatted class selector names is very important. If you fail to create your class selector names using the appropriate naming protocols, the formatting changes expected from the class selectors you created will not be visible in your web page. The naming protocols of class selector names are listed below:
- Class selector names must start with a period [ . ].
- Class selector names can be a combination of letters and numbers.
- Class selector names CANNOT start with a number.
- Class selector names can have multiple words in the name.
- Class selector names CANNOT have spaces in between words.
- Words need to be butted right up next to each other with no space in between.
- Class selector names should be descriptive so as to explain what the rule is expected to do.
See the table below for class selector names that have been formatted correctly and those that have been formatted incorrectly. The far right column explains what’s wrong with the incorrect class selector name.
| Correct | Incorrect | What's wrong with it? |
|---|---|---|
| .ArialGreen | .1smalltext | Class selector names cannot start with a number. |
| .CenteredTahoma | .small text | Class selector names cannot have spaces between words. |
| .littleParagraph | BigLetters | Class selector names must begin with a "." |
| .RedBackground | .pigsFlyHigh | This class selector name isn't necessarily incorrect; however, class selector names should be descriptive. |
