assignment.html/assigment.html at main · ahorloo/assignment.html · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pseudo Selectors — Beginner Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>

    body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; }
    h1 { margin-bottom: 4px; }
    hr { margin: 20px 0; }


    .hover-box {
      border: 1px solid #ccc;
      padding: 12px;
      display: inline-block;
    }
    .hover-box:hover {
      background: #f0f8ff;
    }

    a:link   { color: blue; }
    a:hover  { text-decoration: underline; }
    a:active { color: red; }


    ul.demo-first-child li:first-child {
      font-weight: bold;
    }

    p.demo-first-line::first-line {
      color: green;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <h1>Pseudo Selectors — Simple Explanations</h1>
  <p>We are covering: <strong>:hover</strong>, <strong>:link</strong>, <strong>:active</strong>, <strong>:first-child</strong>, and <strong>::first-line</strong>.</p>

  <!-- 1) :hover -->
  <h2>1) :hover</h2>
  <div class="hover-box">Put your mouse here (hover me)</div>
  <p><strong>Explanation:</strong> <code>:hover</code> works when your mouse pointer is on an element.
     Here, the background becomes slightly blue when you hover over the box. On phones, hover may act differently, and that’s okay.</p>
  <hr>

  <!-- 2) :link -->
  <h2>2) :link</h2>
  <p>These are normal, unvisited links (blue by default in this page):</p>
  <p>
    <a href="https://example.org/">Example.org</a> |
    <a href="https://developer.mozilla.org/">MDN</a>
  </p>
  <p><strong>Explanation:</strong> <code>:link</code> targets links you haven’t visited yet.
     We set them to blue here. If you click a link and come back, your browser might show a different color for visited links by default (we didn’t style <code>:visited</code> in this demo).</p>
  <hr>

  <!-- 3) :active -->
  <h2>3) :active</h2>
  <p>Click and hold a link above. While your mouse is pressed down, it should turn red.</p>
  <p><strong>Explanation:</strong> <code>:active</code> is the short moment when you are pressing the element (like a link or button).
     In our CSS, <code>:active</code> is after <code>:hover</code> so that the pressed style can win when both apply.</p>
  <hr>

  <!-- 4) :first-child -->
  <h2>4) :first-child</h2>
  <ul class="demo-first-child">
    <li>First item (this one is bold because it’s the first child)</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>
  <p><strong>Explanation:</strong> <code>:first-child</code> selects an element that is the very first child of its parent.
     In our list, only the first <code>&lt;li&gt;</code> gets bold text.</p>
  <hr>

  <!-- 5) ::first-line -->
  <h2>5) ::first-line</h2>
  <p class="demo-first-line">
    This paragraph uses <code>::first-line</code> to color and bold only the first line of text.
    If you resize the window, the first line may change because it depends on how the text wraps.
    The rest of the paragraph stays normal so you can clearly see the effect.
  </p>
  <p><strong>Explanation:</strong> <code>::first-line</code> is a pseudo-element (notice it has two colons).
     It styles just the first rendered line of a block of text. Only certain CSS properties apply here (like color and font styles).</p>

</body>
</html>