Animated Menu Icon Demonstrations

CSS Selectors Demonstration

This page demonstrates the use of various CSS selectors. Each example is styled using demo.css.

1. Class Selector

This paragraph uses a class selector for styling.

2. ID Selector

This paragraph uses an ID selector for styling.

3. Attribute Selector

Hover over this link to see how the attribute selector styles it.

4. Pseudo-Class Selector (:hover)

Hover over this link to see the :hover pseudo-class in action.

5. Pseudo-Element Selector (::before)

This paragraph has a ::before pseudo-element for decoration.

Code Example

/* Class Selector */
.highlight {
    background: #eaf6e6;
    padding: 5px;
}

/* ID Selector */
#unique {
    font-weight: bold;
    color: #0056b3;
}

/* Attribute Selector */
a[title] {
    color: #d63384;
    text-decoration: underline;
}

/* Pseudo-Class Selector */
a:hover {
    color: #0056b3;
    font-weight: bold;
}

/* Pseudo-Element Selector */
.quote::before {
    content: "“";
    color: #0056b3;
    font-size: 24px;
    margin-right: 5px;
}