Cascading Style Sheets bring order and beauty to our applications.

Cascading style sheet (CSS) selectors are the glue that connects styling to HTML content. Understanding how they work enables a developer to write more semantic markup and keeps styling modular for better project maintenance. 

In this course, we will start with basic selectors and work our way through more complex classification of selectors, explaining common use cases along the way. Finally, we’ll look at how selectors can be combined and how selector specificity can create some common problems.

The first step to styling a website or application is correctly defining CSS selectors. I will break down the anatomy of a basic CSS rule-set (selector and declaration block with properties and values) to lay the foundation for more complex selectors.

Understand Basic CSS Selectors

The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what elements on the page are interactive and that they can use them to navigate the website.

Identify Interactive HTML Elements with CSS Link Pseudo Classes

Using just semantic CSS Pseudo-Classes you can help define important states for form elements that ensure the user provides the correct data without frustration.

Define Form Element States with CSS Form Pseudo Classes

DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hierarchy and what type of elements they are. You can also use `:nth-child` to target custom element patterns, like every other element (odd or even).

Target Custom HTML Element Patterns with DOM Hierarchy Pseudo Classes in CSS

Pseudo elements allow us to target elements that are not explicitly set in the DOM. Using `::before ::after` we can actually create and manipulate elements in the DOM that do not impact the content. While `::first-letter ::first-line ::selection ::placeholder` allow us to target elements that do not have a specific DOM element.

Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements

To be more specific when targeting DOM elements, we can combine selectors or chain them to style children or multiple groups.

Chain Simple CSS Selectors for Fine-grain DOM Element Targeting

Using the adjacent `+` and general `~` sibling combinators we can alter the appearance of sibling DOM elements. In this lesson we use this strategy to style a navigation bar to to indicate which element is selected by leveraging the radio button functionality. This allows us to create a basic interactive interface without needing Javascript.

Advanced CSS Selector Chaining for Improved Interaction without Javascript

CSS uses a cascading hierarchy to override previously declared styles. To help resolve conflicts it uses a formula to calculate selector specificity and give priority to the more specific selectors. In this lesson we untangle these rules, show common pitfalls, and how to avoid them.

CSS Selectors in Depth

Garth Braithwaite

Course Content