From the course: CSS Essential Training

Unlock the full course today

Join today to access over 24,800 courses taught by industry experts.

Descendant combinators and selector lists

Descendant combinators and selector lists - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Descendant combinators and selector lists

“

- [Instructor] When writing HTML, tags are nested inside of other tags, which creates a hierarchy known as the Document Object Model or DOM for short. Elements nested at the first level create a parent-child relationship. Deeper levels create an ancestor-descendant relationship. Elements nested within the same parent are sibling elements. Descendant combinators are used to select nested elements by combining two selectors, one targeting an ancestor element, and the other a descendant element. It must be separated by a space. For example, section, space, p will select only paragraphs inside of a section element. Let's open up a CodePen example to see the different ways we can use a descendant combinator. Let's start by uncommenting the color value in the a selector. Delete the slash and asterisk to add the style back in or use the keyboard shortcut, Command or Control + forward slash. This is a type selector, so it will…

Contents