CSS 2 💻 selectors and comments - KandZ

CSS selectors are patterns used to select and style HTML elements. Understanding selectors is essential for applying styles effectively. CSS also allows comments to document your code.

CSS Comments

Comments are used to add notes or explanations in your CSS code. They are ignored by the browser.

Syntax:

/* This is a single-line comment */

/*
   This is a
   multi-line comment
*/

Types of Selectors

Selector Type	Symbol/Pattern	Example	Description
Element	`element`	`p { }`	Targets all elements with a specific tag name
Class	`.classname`	`.button { }`	Targets all elements with a specific class
ID	`#idname`	`#header { }`	Targets only one element with a specific ID
Attribute	`[attribute="value"]`	`[type="text"] { }`	Targets elements with specific attributes
Pseudo-element	`::pseudo`	`::placeholder { }`	Styles parts of an element
Pseudo-class	`:pseudo`	`:hover { }`	Targets elements based on their state
Child	`>`	`nav > ul { }`	Targets direct children of an element
Descendant	`(space)`	`.container .content { }`	Targets descendants of a parent element
Adjacent sibling	`+`	`.header + .footer { }`	Targets the immediate sibling element
General sibling	`~`	`.header ~ .footer { }`	Targets all siblings following an element
Grouping	`,`	`h1, h2 { }`	Targets multiple elements at once

1. Element Selector

Targets all elements with a specific tag name.

p {
    font-size: 16px;
}

<p>This is a paragraph.</p>

2. Class Selector

Targets all elements with a specific class. Classes start with a dot (.).

.button {
    background-color: #FFC;
}

<button class="button">Click me!</button>

3. ID Selector

Targets only one element with a specific ID. IDs start with a hash (#).

#header {
    color: red;
}

<h1 id="header">Header</h1>

4. Attribute Selector

Targets elements with specific attributes or attribute values.

/* Exact match */
[type="text"] {
    border: none;
}

/* Attribute value starts with "img" */
[class^="img"] { }

/* Attribute value contains "logo" */
[class*="logo"] { }

/* Attribute value ends with "-btn" */
[class$="-btn"] { }

/* Attribute value is not equal to "hidden" */
[type!="hidden"] { }

<input type="text" placeholder="Enter your text here">

5. Pseudo-element Selector

Styles specific parts of an element.

input::placeholder {
    color: gray;
}

Pseudo-element	Description
`::before`	Inserts content before the element
`::after`	Inserts content after the element
`::first-line`	Selects the first line of a block-level element
`::first-letter`	Selects the first letter of a block-level element
`::placeholder`	Selects the placeholder of an input or textarea

<input type="text" placeholder="Enter some text">

6. Child Selector

Targets only direct children of an element using >.

nav > ul {
    list-style-type: none;
}

<nav>
    <ul>  <!-- Selected -->
        <li><a href="#">Home</a></li>
    </ul>
</nav>

7. Descendant Selector

Targets any descendant of a parent element using a space.

.container .content {
    background-color: #FFC;
}

<div class="container">
    <p class="content">This is some content.</p>
</div>

8. Adjacent Sibling Selector

Targets the sibling element that directly follows another element using +.

.header + .footer {
    text-align: center;
}

<h2 class="header">Header</h2>
<footer class="footer">Footer</footer>

9. General Sibling Selector

Targets all siblings following a specific element using ~.

.header ~ .footer {
    margin-top: 10px;
}

<h2 class="header">Header</h2>
<div class="content"></div>
<footer class="footer">Footer</footer>

10. Pseudo-class Selector

Targets elements based on their state.

a:hover {
    text-decoration: underline;
}

Pseudo-class	Description
`:hover`	When the user hovers over an element
`:active`	When the user clicks on an element
`:focus`	When an element has focus
`:visited`	When a link has been visited

<a href="#">Click me!</a>

11. Group Selector

Targets multiple elements at once using a comma.

h1, h2 {
    background-color: red;
}

<h1>Header</h1>
<h2>Header 2</h2>

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors</title>
    <style>
        /* ====== ELEMENT SELECTOR ====== */
        p {
            font-size: 16px;
            color: #333;
        }

        /* ====== CLASS SELECTOR ====== */
        .button {
            background-color: #ffc107;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .button:hover {
            background-color: #e0a800;
        }

        /* ====== ID SELECTOR ====== */
        #header {
            color: blue;
            text-align: center;
        }

        /* ====== ATTRIBUTE SELECTOR ====== */
        [type="text"] {
            border: 2px solid #ddd;
            padding: 8px;
            border-radius: 4px;
            width: 200px;
        }

        [type="text"]:focus {
            border-color: #007bff;
            outline: none;
        }

        /* ====== PSEUDO-ELEMENT SELECTOR ====== */
        input::placeholder {
            color: #999;
            font-style: italic;
        }

        /* ====== CHILD SELECTOR ====== */
        nav > ul {
            list-style-type: none;
            padding: 0;
            display: flex;
            gap: 20px;
        }

        nav > ul > li > a {
            text-decoration: none;
            color: #007bff;
        }

        /* ====== DESCENDANT SELECTOR ====== */
        .container .content {
            background-color: #fff3cd;
            padding: 15px;
            border-radius: 4px;
            border: 1px solid #ffc107;
        }

        /* ====== ADJACENT SIBLING SELECTOR ====== */
        .header + .footer {
            text-align: center;
            margin-top: 20px;
            color: #6c757d;
        }

        /* ====== GENERAL SIBLING SELECTOR ====== */
        .header ~ .sibling {
            color: #28a745;
            font-weight: bold;
        }

        /* ====== GROUP SELECTOR ====== */
        h1, h2 {
            font-family: Arial, sans-serif;
        }

        /* ====== COMBINATION EXAMPLE ====== */
        .container p.highlight {
            background-color: #ffc107;
            padding: 5px;
        }

        /* ====== MULTILINE COMMENT ====== */
        /*
            This is a multiline comment.
            It can span multiple lines.
            Useful for documenting complex sections.
        */
    </style>
</head>
<body>

    <!-- ====== ELEMENT SELECTOR ====== -->
    <h1 id="header">Header</h1>
    <p>This is a paragraph.</p>

    <!-- ====== CLASS SELECTOR ====== -->
    <button class="button">Click me!</button>

    <!-- ====== ATTRIBUTE SELECTOR ====== -->
    <input type="text" placeholder="Enter your text here">

    <!-- ====== CHILD SELECTOR ====== -->
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <!-- ====== DESCENDANT SELECTOR ====== -->
    <div class="container">
        <p class="content">This is some content.</p>
    </div>

    <!-- ====== ADJACENT SIBLING SELECTOR ====== -->
    <h2 class="header">Header 2</h2>
    <footer class="footer">Footer</footer>

    <!-- ====== GENERAL SIBLING SELECTOR ====== -->
    <h2 class="header">Another Header</h2>
    <div class="sibling">This is a sibling div.</div>
    <div class="sibling">This is another sibling div.</div>

    <!-- ====== COMBINATION EXAMPLE ====== -->
    <div class="container">
        <p class="highlight">This is highlighted text.</p>
    </div>

</body>
</html>

Quick Reference

Selector	Syntax	Example	Description
Element	`element`	`p { }`	All `<p>` elements
Class	`.class`	`.button { }`	Elements with `class="button"`
ID	`#id`	`#header { }`	Element with `id="header"`
Attribute	`[attr="value"]`	`[type="text"] { }`	Elements with `type="text"`
Child	`parent > child`	`nav > ul { }`	Direct children of `nav`
Descendant	`parent child`	`.container p { }`	All `<p>` inside `.container`
Adjacent sibling	`prev + next`	`h2 + p { }`	`<p>` directly after `<h2>`
General sibling	`prev ~ next`	`h2 ~ p { }`	All `<p>` after `<h2>`
Pseudo-class	`:state`	`a:hover { }`	Link on hover
Pseudo-element	`::part`	`::placeholder { }`	Input placeholder
Group	`a, b`	`h1, h2 { }`	All `<h1>` and `<h2>`

Best Practices

✅ Do This:

/* Use meaningful class names */
.button-primary { }

/* Use comments to document sections */
/* ====== HEADER STYLES ====== */

/* Group related selectors */
h1, h2, h3 {
    font-family: 'Arial', sans-serif;
}

/* Use child selectors to avoid over-styling */
nav > ul { }  /* Only direct children */

❌ Don’t Do This:

/* Don't use IDs for reusable styles */
#button1 { }  /* Use .button instead */

/* Don't use overly specific selectors */
body > div > div > p { }  /* Overly specific */

/* Don't use vague class names */
.a { }  /* Not descriptive */

Pro Tip: Use the specificity hierarchy to understand which styles take precedence:

ID > Class/Attribute/Pseudo-class > Element/Pseudo-element
Inline styles have the highest specificity
Use classes for most styling to keep your CSS maintainable and reusable

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!