#CSS Selectors

This article uses some styles not yet covered in previous lessons, purely for demonstration purposes.

Basic Selectors

Selector	Description	View
`*`	Universal selector, selects all elements	-
`tagName`	Tag selector, selects elements by tag	View
`.className`	Class selector, selects elements by class	View
`#ID`	ID selector, selects element by ID	View
`A, B, C`	Selector list, selects multiple elements	View

#Tag Selector

A tag selector is written using the element's tag name, such as h1, p, or table.

Example:

h1 {
    color: red;
}

p {
    color: blue;
}

Tag Selector

        Heading 1
        Paragraph

#Class Selector

A class selector starts with a dot (.) followed by the class name, such as .card or .button.

Example:

Class Selector

        
            Alice's Adventures in Wonderland
            
                One day, a gloomy Alice sat with her sister by the riverbank. Suddenly, a strange white rabbit appeared—dressed up, holding a pocket watch, muttering to itself, and hurrying along.
                Curious, Alice followed it and jumped into the rabbit hole. The hole was very deep, and after a long fall, she landed.
                She found herself in a strange hall full of doors, all locked. She picked up a key that only fit a small door. It was too small to pass through, but she saw a beautiful garden beyond it.
                She left the key on the table and found a bottle labeled Drink Me.
                Alice drank it without hesitation and shrank small enough to go through the door, but now couldn't reach the key.
                In panic, she found a cake labeled Eat Me. After eating it, she grew rapidly until her head touched the ceiling.

/* Card */
.card {
    /* Text color */
    color: #fafafa;
    background-color: #212121;

    /* Padding */
    padding: 1rem;
}

/* Card Title */
.card-title {
    font-size: 2rem;    /* Font size */
    font-weight: bold;  /* Bold text */
}

<div class='card'>
    <cite class='card-title'>Alice's Adventures in Wonderland</cite>
    <blockquote class='card-content'>
        One day, a gloomy Alice sat with her sister by the riverbank. Suddenly, a strange white rabbit appeared—dressed up, holding a pocket watch, muttering to itself, and hurrying along.
        Curious, Alice followed it and jumped into the rabbit hole. The hole was very deep, and after a long fall, she landed.
        She found herself in a strange hall full of doors, all locked. She picked up a key that only fit a small door. It was too small to pass through, but she saw a beautiful garden beyond it.
        She left the key on the table and found a bottle labeled <q>Drink Me</q>.
        Alice drank it without hesitation and shrank small enough to go through the door, but now couldn't reach the key.
        In panic, she found a cake labeled <q>Eat Me</q>. After eating it, she grew rapidly until her head touched the ceiling.
    </blockquote>
</div>

#ID Selector

An ID selector starts with a # followed by the ID name, such as #navigation or #logo.

ID Selector

        
            
            Primers

/* Navigation */
#navigation {
    /* Text color */
    color: #fafafa;
    background-color: #212121;

    /* Padding */
    padding: 1rem;
}

/* Logo */
#logo {
    margin: 0 8px;
}

/* Title */
#title {
    font-size: 2rem;    /* Font size */
    font-weight: bold;  /* Bold text */
}

<div id='navigation'>
    <img id='logo' src="https://xplanc.org/primers/icon.svg" alt="Icon" width="32px" height="32px"/>
    <span id='title'>Primers</span>
</div>

#Selector List

Selectors can be grouped into a list, applying the same style to multiple selectors. Each selector is separated by a comma (,). For example:

h1, h2, h3, h4, h5, h6 {
    color: red;
}

/* Equivalent to */

h1 {
    color: red;
}

h2 {
    color: red;
}

h3 {
    color: red;
}

h4 {
    color: red;
}

h5 {
    color: red;
}

h6 {
    color: red;
}