Sign in

$4.55

What is the CSS :scope pseudo-class for?

Ask a question+
0

I need to understand what is :scope pseudo-class and how can I use it?

$ offer bounty
Alvard 920
add comment

3 Answers

1

The :scope CSS pseudo-class represents elements that are a reference point for selectors to suit against.
See the example:

!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      .container {
      margin: 40px auto;
      max-width: 700px;
      background-color: #eeeeee;
      padding: 20px;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
      }
      section {
      padding: 30px;
      }
      :scope {
      background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:scope selector example</h2>
    <div class="container">
      <section>
        <p>
          Inside the scope.
        </p>
      </section>
    </div>
  </body>
</html>
Muhamed Aziz 320
add comment
1

The :scope CSS pseudoclass represents elements that are a reference point for selectors to match against. Currently, when used in a stylesheet, :scope is the same as :root, since there is not at this time a way to explicity establish a scoped element.
You can read more about :scope CSS pseudoclass here: https://www.w3docs.com/learn-css/scope.html

Azniv Saroyan 150
add comment
0

You must agree that a text that looks like it is being typed across the screen looks quite attractive. Did you know that you can apply a typewriter effect to your own text by using pure CSS? Now we are going to do that together, step by step!

1.Add HTML¶
As always, firstly we need the basic HTML code to get started. Here’s our code:

<div class="typewriter">
<h1>Once upon a time.</h1>
</div>
Note that you can use any heading or block text. The code above is just our example. We wrapped the heading in a .typewriter container.

  1. Add the Style¶
    In order to ensure that each character has the same width and to make the transition between letters feel like being physically typed, we need to make our font monospace. For that purpose, we need to define the font-family CSS property to “monospace”.

Another important property to be used is letter-spacing to define the space between letters. Let’s see an example of this piece of the code:

.typewriter h1{
font-family: monospace;
letter-spacing: .17em;
}
We have a few more properties being used. The first property that you can use is the CSS margin property. By defining “0 autos”, you make your text look like it’s flowing across the screen as it is revealed. As the animation increases the width, the element repositions itself to stay in the center.

The CSS overflow property with its “auto” value hides a content which exceeds the width of the element. To make it clearer, we start our animation at a zero width. This property helps ensure that the text is revealed only when the width expands.

Can you guess what’s the next thing we need to do? Right, we need to prevent the text from splitting into two lines. The CSS white-space property comes to help with its “no-wrap” value.

Let’s see what we’ve got:

.typewriter h1 {
margin: 0 auto;
overflow: auto;
white-space: no-wrap;
}
The next thing we can add to create an illusion that the text is being typed is a border. We use the border-right CSS property. That will be a blinking cursor at the end of the text. The blinking effect will be created by applying animation to our border.
.typewriter h1 {
border-right: .17em solid pink;
}

Azniv Saroyan 150
add comment

Your Answer

how it works
asked
viewed27

Related