How to Use CSS Pseudo-Classes
► Pseudo-classes specify a unique state of the element that has been triggered due to user interaction.
A common pseudo-class that we are all familiar with is the :hover.
Our pages will usually be full of links and buttons for users to click, and we would ordinarily set separate styles that only come in to force when the user hovers their cursor over the element. This change in styles informs the user that the element is interactive and can be clicked.
For example - a:hover { }
In this video, we will look at the :hover pseudo-class, plus
:visited
:link
:root
:first-child
:last-child
:first-of-type
:last-of-type
:nth-child() + nth term, and odd & even keywords
:disabled
:checked
:required
:not ( )
In addition to these, we will discuss visited links and privacy, and take a brief look at the CSS concept of specificity.
► Timestamps:
0:00 Start
1:49 - GitHub Repo
2:06 - CodePen
2:55 - :hover
5:49 - :visited & link
7:14 - Privacy and the :visited selector:
8:45 - :root
10:09 - Brief word on specificity
12:35 - :first-child & :last-child
13:40 - :first-of-type & :last-of-type
17:03 - :nth-child()
19:50 - :nth-child() - odd & even keywords
20:36 - Using :nth-child() to style table rows
21:00 - :disabled
22:42 - :checked
23:24 :required
24:00 Negation :not()
► Get the code:
GitHub Repo: https://github.com/craigabourne/css-p...
CodePen Start: https://codepen.io/craigabourne/pen/Z...
CodePen End: https://codepen.io/craigabourne/pen/V...
Code Pen Even/Odd: https://codepen.io/craigabourne/pen/x...
CodePen :not(): https://codepen.io/craigabourne/pen/x...
Nth-child table row: https://codepen.io/craigabourne/pen/x...
► Links used in the video:
MDN Selectors: https://developer.mozilla.org/en-US/d...
MDN Pseudo Classes: https://developer.mozilla.org/en-US/d...
Privacy and the :visited selector: https://developer.mozilla.org/en-US/d...
CSS Specificity: https://css-tricks.com/specifics-on-c...
► 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...
Universal & Attribute Selectors: • Universal and Attribute Selectors in CSS
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
Смотрите видео How to Use CSS Pseudo-Classes онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 21 Июнь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,950 раз и оно понравилось 101 людям.