CSS-Selector-Cheat-Sheet/index.html at main · Linumz/CSS-Selector-Cheat-Sheet · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors Cheat Sheet</title>
    <link rel="stylesheet" href="styles.css"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Reddit+Sans&display=swap" rel="stylesheet">
</head>
<body>
    <h1>* My CSS Selectors Cheat Sheet *</h1>
    <h2>What is a CSS Selector ?</h2>
    <p>A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector.</p>
    <table>
        <thead>
            <tr>
                <th scope="col">Selector </th>
                <th scope="col">CSS </th>
                <th scope="col">Description </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Type Selector</th>
                <td scope="row">h1</td>
                <td scope="row">Type selectors target an HTML element such as an &lt;h1&gt;</td>
            </tr>
            <tr>
                <th scope="row">Class Selector</th>
                <td scope="row">.selector</td>
                <td scope="row">Class selectors target an element that has a specific value for its class attribute</td>
            </tr>
            <tr>
                <th scope="row">ID Selector</th>
                <td scope="row">#selector</td>
                <td scope="row">ID selectors target an element that has a specific value for its id attribute</td>
            </tr>
        </tbody>
    </table>
</body>
</html>