Universal and Attribute Selectors in CSS
► In this video, we are going to look some more at advanced selectors by learning about attribute selectors and the universal selector
The universal selector targets every element on the page from the body element down.
The attribute selector targets elements based on attributes and values they possess. We can reference an attribute name like href, target, src, for example, or target elements whose attributes contain a stated value.
This could be the exact attribute selector which selects an element with an attribute that has an exact value, like a URL for example.
Or we could target elements with a partial attribute selector. These would be attributes where we look for parts of values.
We could look for the attribute values that start a given way ([href^="http"]), or end a given way ([href$=".com"]). We could also select an attribute that contains a substring anywhere within its value ([href*="://"]).
► Timestamps:
0:00 Start
1:00 The project & getting the files
3:14 The attribute selector
4:46 MDN Attribute Reference
5:01 [attr] Simple attribute selectors
5:34 [attr=value] Selecting based on exact attribute value
6:41 Selecting based on partial attribute value
7:17 [attr^=value] Partial attribute prefix selector
8:52 [attr$=value] Partial attribute suffix selector
10:04 [attr*=value] Partial attribute contains selector
11:30 [class] [id] Class & ID attribute selectors
13:43 Universal selector
13:56 The universal selector does not select pseudo-elements
14:20 Universal selector syntax & grouping pseudo-elements
15:13 Summary
► Get the code:
GitHub Repo: https://github.com/craigabourne/css-a...
CodePen Start:https://codepen.io/craigabourne/pen/v...
CodePen End: https://codepen.io/craigabourne/pen/p...
► Links used in the video:
MDN Selectors: https://developer.mozilla.org/en-US/d...
https://developer.mozilla.org/en-US/d...
https://developer.mozilla.org/en-US/d...
MDN Attributes https://developer.mozilla.org/en-US/d...
Pseudo elements: https://developer.mozilla.org/en-US/d...
► Other types of CSS Selectors:
Element, Class, & ID Selectors: • CSS Selector Basics - Element, Class,...
Child & Descendant Selectors: • CSS Child and Descendant Selectors
Sibling Selectors: • Adjacent and General Sibling Selector...
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
Смотрите видео Universal and Attribute Selectors in CSS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 14 Июнь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,728 раз и оно понравилось 99 людям.