CSS Selectors

Objectives

• Describe the syntactical and functional relationship between selectors, properties, and values
• Style all elements of a particular HTML element on a web page
• Describe the difference between class and id selectors
• Apply styles to specific elements by selecting elements with classes and ids
• Apply a set of styles to children of a specific class or tag

Specificity in CSS

One of the most important concepts with CSS is specificity. Imagine you select an element by it's class and give it some style; then, on the next line, you select the same element by it's element name and it's ID - how does the browser know what style to apply? Well, every element gets a score and it's this score that dictates what CSS property is applied.

Specificity Calculator

Every selector has its place in the specificity hierarchy, and if two selectors apply to the same element, the one with higher specificity wins. Overall, there are four distinct factors that define the specificity level of a given selector: inline styles, IDs, classes+attributes and elements. You can calculate CSS specificity with CSS Specificity Calculator:

Calculating specificity

This is calculated as 113

This is calculated as 23

This is calculated as 1000

A couple of rules to think about:

• If two selectors apply to the same element, the one with higher specificity wins
• When selectors have an equal specificity value, the latest rule is the one that counts
• When selectors have an unequal specificity value, the more specific rule is the one that counts
• Rules with more specific selectors have a greater specificity
• The last rule defined overrides any previous, conflicting rules
• The embedded style sheet has a greater specificity than other rules
• ID selectors have a higher specificity than attribute selectors
• You should always try to use IDs to increase the specificity
• A class selector beats any number of element selectors