CSS Child and Descendant Selectors

Опубликовано: 01 Июнь 2021
на канале: Craig A. Bourne

2,867

145

► In this video, we’re going to take a look at two advanced CSS selectors, and these are:

The child combinator selector
The descendent combinator selector

Child and descendant selectors will target elements based on a relationship with a parent or ancestor element, respectively.

We call these selectors combinators, as they combine one or more of the common selector types we know - element selector, class selector & ID selector.

These combinator selectors allow us to burrow down into our documents and be much, much more specific about what element or elements we are selecting exactly. So let’s have a look at what all the fuss is about and dive in.

► Timestamps:
0:00 Start
1:05 The files we’ll work in
2:26 Basic selectors as seen in the last video
2:52 HTML document structure + exploring parent/child & ancestor/descendant element relationships
4:50 Examples of child elements in an HTML file
6:05 Child selectors
7:08 Child selector syntax
7:43 Descendant selectors
9:12 Descendant selector syntax
11:44 Summary

► Get the code:
GitHub Repo: https://github.com/craigabourne/css-c...
CodePen Start: https://codepen.io/craigabourne/pen/M...
CodePen End: https://codepen.io/craigabourne/pen/b...

► Links used in the video:
MDN Selectors: https://developer.mozilla.org/en-US/d...
Child Combinator: https://developer.mozilla.org/en-US/d...
Descendant Combinator: https://developer.mozilla.org/en-US/d...
Tree-like representation of an HTML document: https://www.oreilly.com/library/view/...

► Other types of CSS Selectors:
Element, Class, & ID Selectors:    • CSS Selector Basics - Element, Class,...
Sibling Selectors:    • Adjacent and General Sibling Selector...
Universal & Attribute Selectors:    • Universal and Attribute Selectors in CSS
Pseudo-classes:    • How to Use CSS Pseudo-Classes
Pseudo-elements:    • How to Manipulate Content With CSS Ps...

► This video is part of the CSS for Absolute Beginners playlist:    • CSS for Absolute Beginners

► Social Media:
  / craigabourne
  / craigabourne

► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne

Смотрите видео CSS Child and Descendant Selectors онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 01 Июнь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,867 раз и оно понравилось 145 людям.

580