Understand Basic CSS Selectors

Identify Interactive HTML Elements with CSS Link Pseudo Classes

Define Form Element States with CSS Form Pseudo Classes

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

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

Chain Simple CSS Selectors for Fine-grain DOM Element Targeting

Advanced CSS Selector Chaining for Improved Interaction without Javascript

Understand CSS Selector Specificity

CSS Selectors in Depth

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.

Instructor: [00:00] CSS stands for Cascading Style Sheets. Cascading refers to the CSS hierarchy or being able to override previously declared styles. We'll get more into that when we get into the specificity video.

[00:11] Style sheets are just a place to define how a website should look. We separate content from styling, so we can always have a consistent experience across an application or website, regardless of the content on the page.

[00:23] This separation is done using CSS and HTML. If our styling is separate from our content, we need to be able to define styles and have them targeted at specific parts of the content. We do this using selectors.

[00:36] This is a CSS rule set. It is made up of a selector and a series of rules, or style definitions, in braces. All of these selectors correspond to something in the markup to define what element gets which rules applied to them.

[00:48] This is an element selector. There is no special syntax. Just use any styleable DOM element name, and it will style all of those elements. In this example, the selector would apply to all list items, regardless of where they are in the page.

[01:02] This selector is great for styling existing semantic elements. This is a class selector. It is specified using a period in front of the class name. In this example, this selector applies to any element that has a class attribute which is set to important.

[01:15] Classes can be used on as many elements on a page as needed. They are also not tied to a specific element type. If we needed to change a button to a link, it wouldn't affect this styling. When we get into best practices, we'll talk more about this, but we'll be using classes a lot.

[01:32] This is an ID selector. It is specified using a pound or hashtag symbol. It corresponds to the ID property in the DOM. ID is very similar to class.

[01:41] The main difference is an ID should only be used once per page. When we talk about best practices, we'll get into this more, but it is recommended to avoid using IDs with CSS selectors.

[01:52] A lesser-used selector is the attribute selector. Using the brackets, we can target elements with specific attributes and values. If you just use the attribute name, it applies regardless of the value, but, as in this example, we can target specific values as well.

[02:07] They can be more complex, using syntax that is similar to regular expressions to target specific value patterns. This can make your selectors hard to read and edit, so it's not recommended. Also, many of the most valuable attributes have already been made into pseudo-classes.

Course

CSS Selectors in Depth

Understand Basic CSS Selectors

Share this video with your friends