CSS ID Selector

CSS ID Selector

The CSS ID Selector selects an HTML element based on its unique ID attribute. It allows developers to apply specific styles to a particular HTML element.

The ID selector is written using a hash symbol (#) followed by the ID name.

1. Syntax of CSS ID Selector

The syntax of the CSS ID selector is:

#id-name {
    property: value;
}

In this syntax:

• # represents the ID selector.
• id-name is the name of the HTML element's ID.
• property is the CSS property.
• value is the value assigned to the property.

2. Example of CSS ID Selector

In the following example, the ID selector changes the color of an element with the ID heading.

HTML:

<h1 id="heading">Welcome to CodingRider</h1>

CSS:

#heading {
    color: blue;
    text-align: center;
}

The heading becomes blue and centered because the CSS selector targets the element with the ID heading.

3. Using ID Selector with Different HTML Elements

You can assign an ID to different HTML elements and style them using the ID selector.

HTML:

<h1 id="main-title">Main Heading</h1>
<p id="intro">This is an introduction.</p>
<button id="submit-button">Submit</button>

CSS:

#main-title {
    color: red;
}

#intro {
    font-size: 18px;
    color: green;
}

#submit-button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
}

4. ID Must Be Unique

An ID should be unique within an HTML document. Each ID should identify only one element.

Correct Example:

<h1 id="main-heading">Welcome</h1>
<p id="description">Learn CSS</p>

Incorrect Example:

<h1 id="heading">First Heading</h1>
<h2 id="heading">Second Heading</h2>

Using the same ID for multiple elements is invalid HTML practice. Use class selectors when you need to apply the same styles to multiple elements.

5. ID Selector vs Class Selector

The ID selector and class selector are both used to select HTML elements, but they have different purposes.

6. CSS ID Selector Specificity

ID selectors have higher specificity than class selectors and element selectors. This means an ID selector generally overrides conflicting declarations from class and element selectors.

Example:

p {
    color: green;
}

.message {
    color: blue;
}

#special-message {
    color: red;
}

HTML:

<p class="message" id="special-message">
    This paragraph is red.
</p>

The paragraph appears red because the ID selector has higher specificity than the class and element selectors.

7. ID Selector with JavaScript

ID attributes are also commonly used to identify elements in JavaScript.

<h1 id="title">Hello World</h1>

<script>
    document.getElementById("title").style.color = "blue";
</script>

In this example, JavaScript selects the element with the ID title and changes its text color to blue.

8. Best Practices for ID Selectors

• Use unique IDs within an HTML document.
• Choose meaningful ID names.
• Use lowercase letters and hyphens for readability.
• Do not use spaces in ID names.
• Prefer classes for reusable CSS styles.
• Avoid excessive use of ID selectors in large stylesheets.
• Remember that IDs are case-sensitive.

9. Practice Exercises

1. Create an HTML heading with the ID main-title and make it blue.
2. Create a paragraph with the ID description and set its font size to 20px.
3. Create a button with the ID login-button and apply a green background.
4. Compare the specificity of element, class, and ID selectors.
5. Use JavaScript to select an element using its ID.

Conclusion

The CSS ID Selector is used to style a specific HTML element using its unique ID attribute. It is useful for targeting individual elements and has higher specificity than class and element selectors.