CSS - Pseudo Classes and Elements Part 2

Instructors: Jess, Carmen, and Eda

Pseudo Classes and Elements

Before this session, please:

• Work though steps from Design a Parent Teacher Conference Form solo, recording your questions and new topics being introduced
• Complete Build a Job Application Form solo over the next few days
• Read CSS Pseudo-classes Review and take notes
• Complete CSS Pseudo-classes Quiz solo to test your knowledge of CSS psuedo-classes

During this session, we’ll:

• We’ll review key concepts from Design a Parent Teacher Conference Form to understand how CSS and HTML are working together
• We’ll talk through Build a Job Application Form togther to help prepare you to complete this lab solo over the next few days
• Review notes

After this session, please:

• Read Working with Colors in CSS: What Is Color Theory in Design? and take notes
• Read Working with Colors in CSS: What Are Named Colors in CSS, and When to Use Them? and take notes
• Read Working with Colors in CSS: What Is the RGB Color Model, and How Does the RGB Function Work in CSS? and take notes
• Read Working with Colors in CSS: What Is the HSL Color Model, and How Does the HSL Function Work in CSS? and take notes
• Read Working with Colors in CSS: What Are Hex Codes, and How Do They Work in CSS? and take notes
• Read Working with Colors in CSS: What Are Linear and Radial Gradients, and How Do They Work in CSS? and take notes
• Complete as many steps from Build a Set of Colored Markers as possible before class, complete solo in the next few days if you need more time
• Complete Design a Set of Colored Boxes solo over the next few days
• Read CSS Colors Review and take notes
• Complete CSS Colors Quiz solo to test your understanding of CSS colors

Instructor notes

Design a Parent Teacher Conference Form

We’ll take a look at this exercise that goes over some HTML and CSS concepts we’ve learned!

Build a Job Application Form

We’ll go over this lab exercise to review what we’ve learned so far!

CSS Pseudo-classes Review

In this section, we’ve looked at a lot of new concepts:

• User action pseudo-classes, including :active, :hover, :focus, and :focus-within.
• Input pseudo-classes, including :enabled, :disabled, :checked, :valid, :invalid, :in-range, :out-of-range, :required, :optional, and :autofill.
• Location pseudo-classes, including :any-link, :link, :local-link, :visited, and :target.
• Tree-structural pseudo-classes, including :root, :empty, :nth-child(n), :nth-last-child(n), :first-child, :last-child, :only-child, :first-of-type, :last-of-type, :nth-of-type(n), and :only-of-type.
• Functional pseudo-classes, including :is(), :where(), :has(), and :not().
• Pseudo-elements, including ::before, ::after, ::first-letter, and ::marker.