When you define a style, it is made up of a couple of pieces of information; specifically the selector, the declaration block, and rules, which are a combination of a property and a value.
The selector allows us to define which tag, or tags, will be affected by our style definition. There is a whole methodology for defining selectors.
Defining Selectors
In defining a selector, we are specifying which tag, or tags, will be affected by our style choices. By choosing our selectors, and how specifically we create them, we can either apply the selector to a wide range or tags, or to a single specific tag. We’ll look at selectors from a wide to narrow range in the selection.
The widest selection is when we overwrite an existing tag, for example, the paragraph tag, by specifying p as our selector. This will affect every paragraph tag that we don’t more specifically select. Any rules we apply will change the default values to the paragraph tag. The selector would look like the following:
p {
}To select something more specifically we can use a class name. This is more specific than a generic tag, and we’ve seen the class attribute on our tags already. When we define a class in CSS, we prefix it with a period (.) such as .site-title. In the tag attribute, it is without the period.
A class can be applied to multiple tags on a page and it can even be applied to different types of tags. This is why it is more specific than overwriting a tag.
An ID is the most specific type of selector. Only one tag should have an ID on it, for a given web page. While this isn’t always the case, it should be, and is why the ID selector is the most specific. It is prefixed with a hash sign (#) in the CSS styles, such as: #site-title.
It may be tempting to use IDs for everything, however, since you can only have one element on a page with that ID, it can make for difficult implementation. Therefore, as a general rule, it is best to use tags and classes for our selectors. The guidelines most web developers follow now is to not use IDs for creating a selector. We reserve them for working with JavaScript as we build an interactive web page.
If you need more specific selectors, you can build a selector with multiple tags and classes. For example, you might want to style links in your navigation bar different from within your main content. In which case, you could define your selector as: nav a.
Likewise, you might want your heading 2 tags (<h2>) to be styled differently when they are in a sidebar vs your content. In which case you might have one selector as sidebar h2, while another is .content h2.
How does the browser know which set of CSS styles to apply in precedence order? Well, it uses what we call selector math. It looks at the elements in a selector and counts all of the elements based upon their type. It then multiplies the ID count by 100, class count by 10, and tag count by 1. It sums those values and ranks their importance from high to low.
Pseudo-classes in CSS are given a count of one each. These are usually used to highlight a specific instance such as :hover, :first-line, etc. So it just needs to break a tie, not define a whole ruleset.
If there is a tie, the last selector for a set of styles seen is used. It works backwards from there, so a following rule set superseeds anything previous in the case of a tie.
You can, if you want, have multiple selectors applied to the same set of rules. To do this, separate your selectors by a comma. Typically a developer will place each selector on it’s own line to make it easier to read, and thus maintain. For example:
sidebar div a,
footer a { ... }An Introduction to CSS Selectors was originally found on Access 2 Learn
