CSS Interview Questions

28 Questions

HTML & CSS

Web DevelopmentFrontend

Question 18

What is the difference between class and ID selectors?

Answer:

Class and ID selectors are both used in CSS to apply styles to HTML elements, but they differ in terms of usage, specificity, and how they are applied. Here’s a breakdown of the key differences:

1. Uniqueness

ID Selector (#):
- Uniqueness: An id must be unique within an HTML document. Only one element can have a particular id value.
- Usage: Used when you want to target and style a single, unique element on the page.
Class Selector (.):
- Uniqueness: A class can be used on multiple elements within the same document.
- Usage: Used when you want to apply the same style to multiple elements.

2. Syntax

ID Selector:
- HTML: <div id="header"></div>
- CSS: #header { background-color: blue; }
Class Selector:
- HTML: <div class="menu-item"></div>
- CSS: .menu-item { color: red; }

3. Specificity

ID Selector:
- Specificity: ID selectors have higher specificity than class selectors. This means if both an ID and a class selector apply to the same element, the ID selector’s styles will take precedence.
- Example:
```
#header {
    color: blue;
}
.header {
    color: red;
}
```
  If an element has both an ID of header and a class of header, the text will be blue because the ID selector is more specific.
Class Selector:
- Specificity: Class selectors have lower specificity compared to ID selectors.
- Example:
```
.menu-item {
    color: green;
}
```
  This will apply to any element with the class menu-item, but it will be overridden by any ID selector if both are present.

4. Reusability

ID Selector:
- Reusability: Since an ID must be unique, it cannot be reused to style multiple elements. It’s typically used for styling key, unique elements like a header, footer, or a specific section.
Class Selector:
- Reusability: Classes are reusable across multiple elements, making them ideal for applying common styles to different parts of a webpage, like buttons, links, or sections that share the same look.

5. Performance

ID Selector:
- Performance: ID selectors can be slightly faster for the browser to process because they are unique and the browser can quickly identify the element.
Class Selector:
- Performance: Class selectors may be marginally slower, especially if they apply to many elements, but the difference is typically negligible in most cases.

6. Best Practices

ID Selector:
- Best Practices: Use IDs for elements that are unique on the page and require specific, high-priority styling.
Class Selector:
- Best Practices: Use classes for elements that need to share the same style across multiple elements.

Example in Practice

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* ID Selector */
        #main-title {
            font-size: 24px;
            color: blue;
        }

        /* Class Selector */
        .highlight {
            background-color: yellow;
        }
    </style>
    <title>Class vs ID Selector</title>
</head>
<body>
    <h1 id="main-title">Welcome to My Website</h1>
    <p class="highlight">This is a highlighted paragraph.</p>
    <p class="highlight">This is another highlighted paragraph.</p>
</body>
</html>

In this example:

The h1 element with id="main-title" is styled using the ID selector.
The p elements with class="highlight" share the same style, applied via the class selector.