fix(curriculum): remove video from Pseudo Classes and Elements lectures (#61592)

This commit is contained in:
Supravisor
2025-07-30 13:13:33 +12:00
committed by GitHub
parent fd8cc7d34d
commit 35082c72a6
7 changed files with 11 additions and 60 deletions
@@ -1,19 +1,12 @@
---
id: 672aa74f761c065c9828a95e
title: What Are Pseudo-classes, and How Do They Work?
challengeType: 11
videoId: QPg8XhZU5Qw
challengeType: 19
dashedName: what-are-pseudo-classes
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are pseudo-classes, and how do they work?
Pseudo-classes are special CSS keywords that allow you to select an element based on its specific state or position. The element's state or position could include:
- When it's active.
@@ -1,19 +1,12 @@
---
id: 672bbe9171a5cca90f2edeea
title: What Are Examples of Element User Action Pseudo-classes?
challengeType: 11
videoId: M80PYgBglmY
challengeType: 19
dashedName: what-are-examples-of-element-user-action-pseudo-classes
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are examples of element user action pseudo-classes?
User feedback is a crucial element of web design. For instance, it's important for users to receive visual cues when they interact with elements on a website, such as hovering over a button or clicking a link. This feedback helps users understand the state of interactive elements, like indicating whether a link has been visited or not.
User action pseudo-classes in CSS are special keywords that allow you to provide this kind of feedback without needing JavaScript or other programming languages.
@@ -1,19 +1,12 @@
---
id: 672bbe9d6ec03ea954d92ff7
title: What Are Examples of Input Pseudo-classes?
challengeType: 11
videoId: qsiIDeAVRiM
challengeType: 19
dashedName: what-are-examples-of-input-pseudo-classes
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are examples of input pseudo-classes?
The appearance and behavior of input elements matter when building web forms. A form with inputs that respond to user actions goes a long way in improving user experience, and it should not cause confusion or frustration.
CSS provides several input pseudo-classes that can make your forms more intuitive and user-friendly. Let's look at these pseudo-classes in detail.
@@ -1,19 +1,12 @@
---
id: 672bbeaa5afdc5a98d5ab8ff
title: What Are Examples of Location Pseudo-classes?
challengeType: 11
videoId: i-J4xVUGY5c
challengeType: 19
dashedName: what-are-examples-of-location-pseudo-classes
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are examples of location pseudo-classes?
Location pseudo-classes are used for styling links and elements that are targeted within the current document. They offer a way to apply styles based on whether a link is visited or whether an element is currently in focus.
Examples of location pseudo-classes are:
@@ -1,19 +1,12 @@
---
id: 672bbeb6eefd7ca9c003ea00
title: What Are Examples of Tree-structural Pseudo-classes?
challengeType: 11
videoId: 7lQACnY4opw
challengeType: 19
dashedName: what-are-examples-of-tree-structural-pseudo-classes
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are examples of tree-structural pseudo-classes?
Tree-structural pseudo-classes allow you to target and style elements based on their position within the document tree. The document tree refers to the hierarchical structure of elements in an HTML document.
Here is a list of tree-structural pseudo-classes:
@@ -1,19 +1,12 @@
---
id: 672bbec3b86dbdaa07a5a5be
title: What Are Examples of Functional Pseudo-classes?
challengeType: 11
videoId: eQwf6Y3N_kY
challengeType: 19
dashedName: what-are-examples-of-functional-pseudo-classes
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are examples of functional pseudo-classes?
Functional pseudo-classes allow you to select elements based on more complex conditions or relationships. Unlike regular pseudo-classes which target elements based on a state, for example, `:hover`, `:focus`, functional pseudo-classes accept arguments within parentheses, hence the name "functional pseudo-classes".
Examples of functional pseudo-classes are:
@@ -1,19 +1,12 @@
---
id: 672bbed37c6f51aa3a15e78c
title: What Are Pseudo-elements, and How Do They Work?
challengeType: 11
videoId: sVll3Ta3-D8
challengeType: 19
dashedName: what-are-pseudo-elements
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are pseudo-elements, and how do they work?
One of the most interesting aspects of CSS is the use of pseudo-elements. In this context, "pseudo" means "not real", so pseudo-elements are virtual or synthetic elements that don't directly match any actual HTML elements. They allow you to style specific parts of an element or insert content without adding extra HTML.
To apply a pseudo-element, attach it to the original element's selector using a double colon (`::`). Note that the selector can be any type, such as a class or ID selector. Here's what the basic syntax of pseudo-elements looks like:
@@ -36,7 +29,7 @@ Here is an example of a button element:
<button class="cta-button">Learn More</button>
```
In the CSS, we will use absolute positioning and the `::before` pseudo-element to add a star before the button's `Learn More` text. You will learn more about absolute positioning in future videos.
In the CSS, we will use absolute positioning and the `::before` pseudo-element to add a star before the button's `Learn More` text. You will learn more about absolute positioning in future lectures.
```css
.cta-button {
@@ -78,7 +71,7 @@ The `content` property is used to represent the content you wish to add before t
}
```
In the `::after` pseudo-element, the `transition` property is used to animate changes over 0.3 seconds with an easing effect, creating a smooth and gradual transformation rather than a sudden one. You will learn more about the `transition` property in future videos.
In the `::after` pseudo-element, the `transition` property is used to animate changes over 0.3 seconds with an easing effect, creating a smooth and gradual transformation rather than a sudden one. You will learn more about the `transition` property in future lectures.
You can also attach a pseudo-class to the content you insert into another content with the `::before` and `::after` pseudo-elements. For example, a hover state for the content. Here's an example:
@@ -107,7 +100,7 @@ You can also attach a pseudo-class to the content you insert into another conten
With `transform: translateX(2px)` in the hover state, the content gets pushed to the right by `2px` any time the user hovers on the button. The transition property in the `::after` itself ensures the process takes `0.3s`.
That's what the `transform` property does it allows you to rotate, skew, scale, or translate an element in a particular direction. You will learn more about that in future videos.
That's what the `transform` property does it allows you to rotate, skew, scale, or translate an element in a particular direction. You will learn more about that in future lectures.
In the next example, we will look at the `::first-letter` pseudo-element. The `::first-letter` pseudo-element targets the first letter of an element's content, allowing you to style it. Here's an example of some paragraph text:
@@ -153,7 +146,7 @@ li::marker {
}
```
In this lecture video, we have covered only a few pseudo-elements. But there are many more like the `::placeholder`, `::spelling-error` and `::selection` that I encourage you to explore on your own.
In this lecture, we have covered only a few pseudo-elements. But there are many more like the `::placeholder`, `::spelling-error` and `::selection` that I encourage you to explore on your own.
# --questions--