Learn Every CSS Selector In 20 Minutes

Summary

This video provides a comprehensive guide to CSS selectors, breaking down the essential tools for styling web pages effectively. It covers basic selectors like universal, type, class, and ID, then explores combining selectors, descendant and child selectors, sibling selectors, and pseudo-classes for interactivity and element positioning. The video also explains pseudo-elements (::before and ::after) and attribute selectors, including exact, partial, and negation matches. With clear examples and practical tips, viewers gain a strong foundation for efficiently targeting elements in CSS, while a free downloadable cheat sheet ensures all selectors are easy to reference without memorization.

Takeaways

• 😀 The universal selector (*) targets all elements on the page, but is rarely used for specific styling.
• 😀 Type selectors (e.g., div, span, li) target all elements of that HTML tag, but are less flexible than classes.
• 😀 Class selectors (.) are highly reusable and preferred for styling multiple elements across a page.
• 😀 ID selectors (#) are unique to a single element, making them less versatile than class selectors.
• 😀 Combinators allow combining selectors: spaces for descendants, > for direct children, ~ for general siblings, and + for adjacent siblings.
• 😀 Grouping selectors with commas allows applying the same style to multiple unrelated elements.
• 😀 Pseudo-classes (:hover, :focus, :checked, :disabled, :required) let you style elements based on user interaction or state.
• 😀 Structural pseudo-classes (:first-child, :last-child, :nth-child, :only-child, :first-of-type, :last-of-type, :nth-of-type, :only-of-type) allow styling based on element position or type.
• 😀 The :not() pseudo-class selects elements that do not match a specified selector, offering powerful exclusion logic.
• 😀 Pseudo-elements (::before, ::after) allow injecting content before or after elements without modifying HTML.
• 😀 Attribute selectors ([attr], [attr="value"], [attr^="value"], [attr$="value"], [attr*="value"]) enable targeting elements based on the presence or value of attributes, including partial matches.
• 😀 Combining selectors intelligently enables AND and OR logic to target elements more precisely for styling purposes.

Q & A

What is the universal selector in CSS and how is it used?

The universal selector is represented by an asterisk (*) and it selects all elements on the page. For example, `* { background: red; }` will apply a red background to every element.

How do class and ID selectors differ in CSS?

Class selectors use a period (.) and can be applied to multiple elements, making them reusable. ID selectors use a hash (#) and should be unique to a single element on the page. Classes are generally preferred for flexibility.

What is the difference between descendant and direct child selectors?

A descendant selector (space) selects any element nested inside another, at any level. A direct child selector (`>`) only selects elements that are the immediate child of the specified parent.

How do sibling selectors work in CSS?

General sibling selector (`~`) selects all siblings after a given element, while adjacent sibling selector (`+`) only selects the element immediately following the specified element.

What are pseudo-classes and give examples?

Pseudo-classes allow styling based on user interaction or element position. Examples include `:hover` (on hover), `:focus` (when focused), `:checked` (checkbox or radio is checked), `:first-child`, `:last-child`, and `:not(selector)`.

How do pseudo-elements differ from pseudo-classes?

Pseudo-elements allow you to style or insert content before or after an element, while pseudo-classes style elements based on state or position. Examples include `::before` and `::after`.

What are attribute selectors and how can they be used?

Attribute selectors allow targeting elements based on their attributes. They include `[attr]` (any element with the attribute), `[attr='value']` (exact match), `[attr^='value']` (starts with), `[attr$='value']` (ends with), and `[attr*='value']` (contains).

How can you combine multiple selectors for precise styling?

Selectors can be combined without spaces for an AND operation (e.g., `div.red`) or separated by commas for an OR operation (e.g., `span, li`). This allows targeting elements more precisely.

What is the purpose of the `:nth-child()` pseudo-class?

`:nth-child(n)` selects elements based on their position among siblings. You can use numeric values or formulas like `2n` to select every second element, or `3n` for every third element.

Why are class selectors preferred over ID selectors in CSS?

Class selectors are preferred because they are reusable across multiple elements, offering more flexibility in styling. ID selectors are unique and less practical for shared styles.

How does the `:not()` pseudo-class work?

The `:not(selector)` pseudo-class selects elements that do not match the specified selector. For example, `li:not(.green)` selects all `li` elements that do not have the class `green`.

Can pseudo-elements and pseudo-classes be combined with other selectors?

Yes, pseudo-elements and pseudo-classes can be combined with type, class, ID, or attribute selectors to target specific elements with more precision. For example, `div.red::before` or `li:first-child:hover`.