Adjacent and General Sibling Selectors in CSS
► We are beginning to be able to burrow down into our HTML documents, and accurately target the elements we want.
In previous videos, we have learned to can target elements with matching element names, classes, and IDs. Also, we have learned how to exploit elements based on parent-child and ancestor-descendant relationships.
Here, we are going to carry on looking at CSS combinator selectors and specifically look at those concerned with selecting sibling elements.
The adjacent sibling selector selects a given element only if it immediately follows the first named element, and both are children of the same parent.
The general sibling selector selects a given element only if it follows the first named element (though not necessarily immediately), and both are children of the same parent.
► Timestamps:
0:00 Start
0:55 The project & getting the files
3:03 The selectors we saw in the last video
3:19 Sibling elements
3:56 Sibling combinator selectors
4:56 The adjacent sibling combinator selector (+)
9:38 The many ways to select elements.
11:22 The general sibling combinator selector (~)
14:47 Summary
► Get the code:
GitHub Repo: https://github.com/craigabourne/css-s...
CodePen Start: https://codepen.io/craigabourne/pen/o...
CodePen End: https://codepen.io/craigabourne/pen/z...
► Other types of CSS Selectors:
Element, Class, & ID Selectors: • CSS Selector Basics - Element, Class,...
Child & Descendant Selectors: • CSS Child and Descendant Selectors
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...
► Links used in the video:
MDN Selectors: https://developer.mozilla.org/en-US/d...
Adjacent sibling: https://developer.mozilla.org/en-US/d...
General sibling: https://developer.mozilla.org/en-US/d...
► 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
Смотрите видео Adjacent and General Sibling Selectors in CSS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 07 Июнь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,435 раз и оно понравилось 113 людям.