CSS Combinators Made Easy

Показать описание

Learn how to use CSS Combinators: advanced selectors for styling descendant and sibling HTML elements.

0:00 - Selector Overview

2:00 - Basic Selector - styling one element at a time
div { }

2:34 - Grouping Selector - styling multiple elements at a time
div, p { }

2:58 - Descendant Selector - styling an element type that's nested within another, no matter how deep the nesting goes
div p { }

3:39 - Child Selector - styling elements that are only directly nested within another
div (greater than symbol) p { }

4:58 - Adjacent Sibling Selector - styling an element that only comes directly after another
div + p { }

5:44 - General Sibling Selector - styling an element that follows another for the remainder of the HTML page
div ~ p { }