CSS Selectors

What it is

CSS Selectors are what let you specify how to apply different styling rules to parts of your webpage. Instead of styling every HTML element individually, which would be error prone and time consuming, you can use CSS selectors to select groups of elements on the page to style all at once. For instance, you could use CSS to select your footer and make all of its elements use white text.

Why it matters

Now that you understand how to style individual elements, learning how to use selectors is the next step before you can tackle styling an entire page. It is important to understand selectors well, because issues with the CSS cascade or specificity are a common source of confusion and frustration.

What you'll learn

• The different types of CSS selectors
• How to use divs to group and style sections of a webpage
• The CSS cascade, specificity and inheritance

How to learn it

Once again, start by working through the CSS Selectors tutorial on Interneting is Hard.

This tutorial provides an easy to follow introduction, but leaves out a lot of details. CSS Selectors are one of the hardest CSS concepts to grasp thoroughly, but it is important to have an understanding of how rules get applied because you are guaranteed to run into issues with it.

Next, read through the Mozila guide on the cascade and inheritance.

You don’t need to memorize the exact formulas for calculating specificity, but you do need to be able to explain how the browser chooses how to style an element when there are multiple conflicting CSS rules applied to it.

Later, when you are writing CSS and your new rule isn’t being applied, you’ll have this concept in the back of your mind and you can come and review this again to see what went wrong with your selectors.

If you are still confused, Smashing Magazine has a longer specificity overview.

Comprehension

• What is a CSS Selector?
• What is the type selector?
• What selector should I use if I have two elements of the same type and only want to select one of them?
• What is a class selector? How do I use it?
• What is the naming convention used for classes?
• Why are divs useful for applying CSS?
• Why does the order of CSS rules matter?
• What is a descendant selector?
• What is a CSS pesudoclass selector? What is one example of one?
• What is an id selector?
• Why are ID selectors generally frowned upon?
• What is the one specific use for ID selectors outside of CSS?
• What is a URL fragment?
• What is the CSS Cascade?
• What is CSS Specificity?
• What does !important do to a CSS rule?
• What are the CSS selector combinators (+, >, ~, ' ‘)? Note: see the tasks below if you haven’t learned these yet.
• How does the order of selectors in a CSS file effect the final result?
• What is CSS inheritance?

Tasks

You’ll have gotten some practice using CSS rules if you’ve finished working through the Free Code Camp CSS curriculum, but if you’d like some practice with advanced selectors, the CSS Diner is a fun tutorial game that will walk you through everything again in 10 minutes or so.

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.