mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
fix(curriculum): remove video from Pseudo Classes and Elements lectures (#61592)
This commit is contained in:
+1
-8
@@ -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
-8
@@ -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
-8
@@ -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
-8
@@ -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
-8
@@ -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
-8
@@ -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:
|
||||
|
||||
+5
-12
@@ -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--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user