Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(css): Move CSS examples - Pseudo-classes and pseudo-elements #36580

Merged
merged 1 commit into from
Oct 30, 2024
Merged

chore(css): Move CSS examples - Pseudo-classes and pseudo-elements #36580

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 124 additions & 7 deletions ...learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,55 @@ Pseudo-classes are keywords that start with a colon. For example, `:hover` is a

Let's look at a simple example. If we wanted to make the first paragraph in an article larger and bold, we could add a class to that paragraph and then add CSS to that class, as shown in the first example below:

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}
```html live-sample___first-child
<article>
<p class="first">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>

<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</article>
```

```css live-sample___first-child
.first {
font-size: 120%;
font-weight: bold;
}
```

{{EmbedLiveSample("first-child")}}

However, this could be annoying to maintain — what if a new paragraph got added to the top of the document? We'd need to move the class over to the new paragraph. Instead of adding the class, we could use the {{cssxref(":first-child")}} pseudo-class selector — this will _always_ target the first child element in the article, and we will no longer need to edit the HTML (this may not always be possible anyway, maybe due to it being generated by a CMS).

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}
```html live-sample___first-child2
<article>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>

<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</article>
```

```css live-sample___first-child2
article p:first-child {
font-size: 120%;
font-weight: bold;
}
```

{{EmbedLiveSample("first-child2")}}

All pseudo-classes behave in this same kind of way. They target some bit of your document that is in a certain state, behaving as if you had added a class into your HTML. Take a look at some other examples on MDN:

Expand All @@ -66,7 +110,23 @@ Some pseudo-classes only apply when the user interacts with the document in some
- [`:hover`](/en-US/docs/Web/CSS/:hover) — mentioned above; this only applies if the user moves their pointer over an element, typically a link.
- [`:focus`](/en-US/docs/Web/CSS/:focus) — only applies if the user focuses the element by clicking or using keyboard controls.

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}
```html live-sample___hover
<p><a href="">Hover over me</a></p>
```

```css live-sample___hover
a:link,
a:visited {
color: rebeccapurple;
font-weight: bold;
}

a:hover {
color: hotpink;
}
```

{{EmbedLiveSample("hover")}}

## What is a pseudo-element?

Expand All @@ -81,7 +141,29 @@ For example, if you wanted to select the first line of a paragraph you could wra

The `::first-line` pseudo-element selector will do this for you reliably — if the number of words increases or decreases it will still only select the first line.

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}
```html live-sample___first-line
<article>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>

<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</article>
```

```css live-sample___first-line
article p::first-line {
font-size: 120%;
font-weight: bold;
}
```

{{EmbedLiveSample("first-line")}}

It acts as if a `<span>` was magically wrapped around that first formatted line, and updated each time the line length changed.

Expand All @@ -104,19 +186,54 @@ There are a couple of special pseudo-elements, which are used along with the [`c

You could use these to insert a string of text, such as in the live example below. Try changing the text value of the {{cssxref("content")}} property and see it change in the output. You could also change the `::before` pseudo-element to `::after` and see the text inserted at the end of the element instead of the beginning.

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}
```html live-sample___before
<p class="box">Content in the box in my HTML page.</p>
```

```css live-sample___before
.box::before {
content: "This should show before the other content. ";
}
```

{{EmbedLiveSample("before")}}

Inserting strings of text from CSS isn't really something we do very often on the web however, as that text is inaccessible to some screen readers and might be hard for someone to find and edit in the future.

A more valid use of these pseudo-elements is to insert an icon, for example the little arrow added in the example below, which is a visual indicator that we wouldn't want read out by a screen reader:

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}
```html live-sample___after-icon
<p class="box">Content in the box in my HTML page.</p>
```

```css live-sample___after-icon
.box::after {
content: " ➥";
}
```

{{EmbedLiveSample("after-icon")}}

These pseudo-elements are also frequently used to insert an empty string, which can then be styled just like any element on the page.

In this next example, we have added an empty string using the `::before` pseudo-element. We have set this to `display: block` in order that we can style it with a width and height. We then use CSS to style it just like any element. You can play around with the CSS and change how it looks and behaves.

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}
```html live-sample___before-styled
<p class="box">Content in the box in my HTML page.</p>
```

```css live-sample___before-styled
.box::before {
content: "";
display: block;
width: 100px;
height: 100px;
background-color: rebeccapurple;
border: 1px solid black;
}
```

{{EmbedLiveSample("before-styled")}}

The use of the `::before` and `::after` pseudo-elements along with the `content` property is referred to as "Generated Content" in CSS, and you will often see this technique being used for various tasks. A great example is the site [CSS Arrow Please](https://cssarrowplease.com/), which helps you to generate an arrow with CSS. Look at the CSS as you create your arrow and you will see the {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements in use. Whenever you see these selectors, look at the {{cssxref("content")}} property to see what is being added to the HTML element.

Expand Down